jQuery插件之validation插件(2)

messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date ( ISO ).", number: "Please enter a valid number.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", maxlength: $.validator.format( "Please enter no more than {0} characters." ), minlength: $.validator.format( "Please enter at least {0} characters." ), rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ), range: $.validator.format( "Please enter a value between {0} and {1}." ), max: $.validator.format( "Please enter a value less than or equal to {0}." ), min: $.validator.format( "Please enter a value greater than or equal to {0}." ) }

不过可以将其修改为中文,只要加入以下代码

$.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值") });

使用方式

上面的例子中,validate控件的使用,都是通过使用validate()方法完成的,由于这种方法将HTML结构和javascript逻辑分离,使得代码更加优化

实际上,还有另一种方法就是通过添加HTML属性的方式或添加class类名的方式来进行验证,类似于HTML5新增的input类控件的功能

由于已经将验证规则添加到HTML元素中,所以调用validate()方法时,参数为空

<form> <p> <label for="username">用户名:</label> <input type="text" minlength="2"/> </p> <p> <label for="email">电子邮件:</label> <input/> </p> <p> <label for="url">网址:</label> <input/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({}) </script>

更改提示

无论是validate插件自带的英文提示,或者是其扩展的中文提示,可能与实际项目的需求不相符。这时,就需要我们对错误提示进行更改

而更改错误提示的方法也很简单,只需要使用validate()函数里的,messages()方法即可。如果某个控件没有使用messages()方法,则使用默认的错误提示信息。如下所示

在messages()方法中,{0}代表rules()方法当前规则的属性值

<form> <p> <label for="username">用户名:</label> <input type="text" /> </p> <p> <label for="email">电子邮件:</label> <input /> </p> <p> <label for="url">网址:</label> <input/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, email:{ required: true, email:true }, url:{ required: true, url:true } }, messages:{ username:{ required:"请输入用户名", minlength:"至少输入{0}个字符" }, email:{ required:"请输入邮箱", email:"邮箱格式不正确" }, url:{ required:"请输入网址", url:"网址格式不正确(完整的网址应包括或https://)" } } }) </script>

美化样式

实际上,validate插件输出错误信息的方式是通过增加一个label控件实现的,该label控件的id名为'输入控件的id名-error',类名为'error',且位于输入控件的右侧

下表中列出了关于错误信息的相关属性的方法

参数   类型   默认值   描述 errorClass String "error" 指定错误提示的css类名 errorElement   String "label" 用什么标签标记错误 errorContainer Selector    无 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。如errorContainer: "#messageBox1, #messageBox2" errorLabelContainer Selector   无 把错误信息统一放在一个容器里面 wrapper String   无 用什么标签再把上边的errorELement包起来

【成功样式】

validate插件有一个success()方法,用来设置要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个css类,也可跟一个函数

success:String,Callback

success: function(label) { label.html("&nbsp;").addClass("success"); } success: "success"

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

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