jQuery Validation PlugIn的使用方法详解(2)

推荐做法,将此文件放入messages_cn.js中,在页面中引入 
[codept src="https://www.jb51.net/js/messages_cn.js" type="text/javascript"></script> [/code
四、使用方式 
1.将校验规则写到控件中 

<script src="https://www.jb51.net/js/jquery.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/jquery.validate.js" type="text/javascript"></script> <script src="https://www.jb51.net/article/js/jquery.metadata.js" type="text/javascript"></script> $().ready(function() { $("#signupForm").validate(); }); <form method="get" action=""> <p> <label for="firstname">Firstname</label> <input /> </p> <p> <label for="email">E-Mail</label> <input /> </p> <p> <label for="password">Password</label> <input type="password" /> </p> <p> <label for="confirm_password">确认密码</label> <input type="password" /> </p> <p> <input type="submit" value="Submit"/> </p> </form>

使用class="{}"的方式,必须引入包:jquery.metadata.js 
可以使用如下的方法,修改提示内容: 

复制代码 代码如下:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

 
在使用equalTo关键字时,后面的内容必须加上引号,如下代码: 

复制代码 代码如下:

class="{required:true,minlength:5,equalTo:'#password'}"

 
另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项) 
再有一种方式: 

$.metadata.setType("attr", "validate");

这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用  
2.将校验规则写到代码中   

$().ready(function() { $("#signupForm").validate({ rules: { firstname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "请输入姓名", email: { required: "请输入Email地址", email: "请输入正确的email地址" }, password: { required: "请输入密码", minlength: jQuery.format("密码不能小于{0}个字符") }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能小于5个字符", equalTo: "两次输入密码不一致不一致" } } }); }); //messages处,如果某个控件没有message,将调用默认的信息 <form method="get" action=""> <p> <label for="firstname">Firstname</label> <input /> </p> <p> <label for="email">E-Mail</label> <input /> </p> <p> <label for="password">Password</label> <input type="password" /> </p> <p> <label for="confirm_password">确认密码</label> <input type="password" /> </p> <p> <input type="submit" value="Submit"/> </p> </form>

required:true 必须有值 
required:"#aa:checked"表达式的值为真,则需要验证 
required:function(){}返回为真,表时需要验证 
后边两种常用于,表单中需要同时填或不填的元素  

五、实例讲解

实例一:精简验证,通过表单对象调用validate()方法进行验证,验证规则通过html标签属性定义:以下为常用属性定义距离

class='required'  //必须字段
  //邮箱验证
  //URL网址验证
  //正确的日期 格式满足 2012,0204,2012-02-04
  //输入合法的数字
  //输入整数
minlength=''  //最小输入长度
maxlength=''  //最长输入长度(该值不会提示,当值达到一定字符数不可再增长)
max=''  //输入的数值小于指定值
min=''  //输入的数值大于指定值

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwpzg.html