jquery validate.js表单验证的基本用法入门_jquery_脚本之家

2019-12-22 20:24栏目:竞技宝竞猜
TAG:

扩展textarea 属性,结合jquery.validate.js,在提交表单同时,加上对textarea的长度进行验证。 1.jQuery 对textarea 长度进行验证的插件复制代码 代码如下://对textarea 长度进行验证 jQuery.fn.checkLength = function { defaults = { min: 0 , max: 5 } jQuery.extend; // 当前textarea 的值 var taValue = $; var len = taValue.length; if { $.append(showLengthError; window.setTimeout { $; }, 5000); return false; } else if { $.append(showLengthError; window.setTimeout { $; }, 5000); return false; } else { return true; } //todo: 当键盘输入在正确范围的时候,消除提示 } 注释: 1) 参数传递: defaults = { min: 0 , max: 5 } 分别用于用于接收textarea的最短和最大长度。 2) 返回值 true : 验证长度通过 false : 验证长度失败 2. 使用说明: 在页面添加js引用:

这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录。 先贴一个国内某大公司的代码: 复制代码 代码如下:

示例: 在页面中

我就是从这个例子中开始的,其实这个例子几乎包含了jquery.validate.js的精髓,如果你完整理解了这个代码基本上算是入门了。 想起以前做期货网页在线模拟的时候都自己写代码去判断,真实幼稚死了………… 下面是完整的文章介绍。 默认校验规则 required:true 必输字段 remote:"check.php" 使用ajax方法调用check.php验证输入值 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期 dateISO:true 必须输入正确格式的日期,例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 number:true 必须输入合法的数字digits:true 必须输入整数 creditcard: 必须输入合法的信用卡号 equalTo:"#field" 输入值必须和#field相同 accept: 输入拥有合法后缀名的字符串maxlength:5 输入长度最多是5的字符串minlength:10 输入长度最小是10的字符串rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")range:[5,10] 输入值必须介于 5 和 10 之间 max:5 输入值不能大于5 min:10 输入值不能小于10 默认的提示 复制代码 代码如下: 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 .", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", 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}.") }, 如需要修改,可在js代码中加入: 复制代码 代码如下: jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 .", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format, min: jQuery.validator.format; 推荐做法,将此文件放入messages_cn.js中,在页面中引入

Check Textarea Length

使用方式 1.将校验规则写到控件中 复制代码 代码如下:

当触发按钮事件的时候,我们就可以对textarea 的长度进行判断了。 复制代码 代码如下:$.click{ var bool = $.checkLength({ min : -1 ,max: 10 }); if; } }); 如果textarea是在form表单当中的,则在表单提交的同时,进行验证,条件满足的时候再进行提交。 如下示例: 复制代码 代码如下:// 判断 testarea 长度是否超出限制 var ckContent = $.checkLength({ min : -1 //不判断是否为空 ,max: 512 //最大长度512 }); // 表单验证 var b = $.valid(); // 执行上传操作,上传成功后保存课件信息 if { // todo: submit form } min和max两个参数均可以不传递值,默认最小长度0,最大长度10.如果textarea不为必填项,则min 值赋予 -1. 最后通过返回bool值进行操作。

$ { $.validate; 使用的方式,必须引入包:jquery.metadata.js 可以使用如下的方法,修改提示内容: 在使用equalTo关键字时,后面的内容必须加上引号,如下代码: 另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则在他们自己的项目中可以用这个特殊的选项) Tell the validation plugin to look inside a validate-property in metadata for validation rules. 例如: meta: "validate" 再有一种方式: $.metadata.setType; 这样可以使用validate="{required:true}"的方式,或者,但将不起作用 2.将校验规则写到代码中 复制代码 代码如下: $ { $.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 }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能小于5个字符", equalTo: "两次输入密码不一致不一致" } } }); }); //messages处,如果某个控件没有message,将调用默认的信息 required:true 必须有值 required:"#aa:checked"表达式的值为真,则需要验证 required:function(){}返回为真,表时需要验证 后边两种常用于,表单中需要同时填或不填的元素 常用方法及注意问题 1.用其他方式替代默认的SUBMIT 复制代码 代码如下: $ { $.validate({ submitHandler:function{ alert; form.submit; 可以设置validate的默认值,写法如下: $.validator.setDefaults({ submitHandler: function { alert;form.submit; 如果想提交表单, 需要使用form.submit.submit() 2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便 $ { $.validate; 如果一个页面中有多个表单,用 $.validator.setDefaults 3.ignore:忽略某些元素不验证 ignore: ".ignore" 4.errorPlacement:Callback Default: 把错误信息放在验证的元素后面 指明错误放置的位置,默认情况是:error.appendTo;即把错误信息放在验证的元素后面 复制代码 代码如下: errorPlacement: function { error.appendTo; } //示例:

First Name

14/02/07

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:jquery validate.js表单验证的基本用法入门_jquery_脚本之家