jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
第一节:jQuery Validation让验证变得如此容易
一、官网下载jquery,和jquery validation plugin
二、引入文件
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
三、接下来,声明下面的HTML片段
<form action="" id="jvForm">
姓名:<input type="text" name="username" id="username" class="required" /></br>
密码:<input type="password" name="password" id="password" class="required"/></br>
<input type="submit" value="提交" />
</form>
通过以上代码,大家会发现我们对于每一个input都加上了class=”required”
他的作用就是在这个inpute标签为空时会提示用户出错。
四、最后我们要为我们的框架找到一个切入点
<script type="text/javascript">
$(function() {
$("#jvForm").validate();
})
</script>
运行效果如下
当然提示信息默认是英文的,可根据需要在jquery.validate.js里修改。
第二节:jQuery Validation让验证变得如此容易
上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.
现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码如果为空则提示密码不能为空。
这次我们将校验规则写在代码里
首先还是先引入文件
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
接下来,声明下面的HTML片段
<form action="" id="jvForm">
姓名:<input type="text" name="username" id="username" /></br>
密码:<input type="password" name="password" id="password" /></br>
<input type="submit" value="提交" />
</form>
和之前的相比没有了class=”required”
最后 校验规则如下:
$(function() {
$("#jvForm").validate({
rules: {
username: {
required: true
},
password: {
required: true










