jQuery validate插件功能与用法详解

2020-05-24 21:48:11易采站长站整理

本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考,具体如下:

前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度!

1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidation.org/,官方网站上有详细的文档介绍了jQuery插件的使用方法。对于插件的使用

(1)首先下载jquery.validate.js插件

然后在HTML文件中插入


<script type="text/JavaScript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/js1.js"></script>

因为jQuery插件是基于jQuery库基础之上的,因此在导入jQuery validate.js文件之前一定要先导入jQuery.js文件

(2) jQuery validate插件提供了$(form).validate(options)方法,本插件自带必填的数字,文字等验证规则

其中form表示表单元素名称,options表示调用validate方法时的配置对象,所有配置信息和异常信息显示的规则都包含在对象options中。

2.对于使用jQuery validate的方法有很多种,这里详细介绍通过表单元素名称来验证表单规则的方法。

即一种与HTML元素无直接联系,而是通过name属性来关联字段和验证规则的验证写法,这种方法可以实现行为与结构的分离。


<form id="form-sp">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" name="username" />
</p>
<p class="tip"></p>
<p>
<label for="password">密 码</label>
<input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
<label for="confirm-password">再输入</label>
<input type="password" name="confirm-password"/>
</p>
<p class="tip"></p>
<label for="verify"></label>
<input type="button" value="确定" name="verify" id="btn-ver"/>
</fieldset>
</form>

这对上诉的HTML文件,我们可以写成如下验证规则:


$("#form-sp").validate({
rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},
messages:{