推荐做法,将此文件放入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='' //输入的数值大于指定值