jquery表单验证学习心得
来源:互联网 发布:ubuntu搜狗输入法安装 编辑:程序博客网 时间:2024/06/05 17:17
jquery validate的官方演示和文档地址:
引用块内容
官方网站:http://jqueryvalidation.org/
官方演示:http://jqueryvalidation.org/files/demo/
官方文档:http://jqueryvalidation.org/documentation/
在提交表单前常要对用户输入进行校验
.asp.net的验证控件就是用于此目的, 可以同时进行客户端和服务器端验证. 但是验证控件并没有被所有项目采用. 而且在MVC项目中经常使用自己的客户端验证框架.
所以在比较了若干表单验证插件后, 决定采用validate插件. 因为其使用简单并且灵活.
query validate这个jquery插件几乎可以轻松应对95%以上的表单验证,这也是选择它的原因。
调用jquery。需要引用jquery.min.js和jquery.validate.js
因为jquery.validate.js是jquery插件所以必须要有jquery支持,现在使用jquery的网站很多。
jquery validate默认验证规则的提示语中文化
参考 http://www.jb51.net/article/75301.htm
$.extend($.validator.messages, { required: "必填", remote: "请修正该字段", email: "电子邮件格式不正确", url: "网址格式不正确", date: "日期格式不正确", dateISO: "请输入合法的日期 (ISO).", number: "请输入数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符", 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} 的值") });
但是这次我们需要自定义表单验证,所以要使用自定义表单验证方法
addMethod(name,method,message)方法:
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数
以邮箱验证规则为例:jQuery.validator.addMethod("mail", function (value, element) { var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/; return this.optional(element) || (mail.test(value));}, "邮箱格式不对");
主要使用jquery插件的方法步骤如下:
- 导入js库
- 默认校验规则(上面参考了)
- 将校验规则写到控件中
- 将校验规则js中
我们也可以用其他方法代替默认的submit
$().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } });});
更改错误提示信息的样式
设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式
input.error { border: 1px solid red; }label.error { background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200;}label.checked { background:url("./demo/images/checked.gif") no-repeat 0px 0px;}
一点点心得
jQuery 是一个 JavaScript 库。简化了 JavaScript 编程。容易学习。我是通过菜鸟教程学习的jquery,可以在线编程,非常适合入门的同学。如果做系统分析的验证以上看懂会用就够了,如果还想进一步学习,可以参照下面的教程,一步一步学习。
菜鸟教程: http://www.runoob.com/jquery/jquery-tutorial.html
- jquery表单验证学习心得
- JQuery EasyUI表单-表单验证
- jquery 表单验证插件
- JQuery验证表单例子
- jQuery对表单验证
- jquery表单验证插件
- jquery表单验证
- jquery 通用表单验证
- jquery表单验证
- jquery重写表单验证
- jquery 表单验证框架
- jQuery validate 表单验证
- jquery表单验证
- jQuery表单验证
- jquery验证前台表单
- JQuery表单验证
- jquery 表单验证
- JQuery表单验证DEMO
- Spring原理及特性
- All com.android.support libraries must use the exact same version specification解决
- fang wen lian biao
- HTML5 [data-]属性——使用HTML标签的data属性初始化JS组件
- python第二篇(format)
- jquery表单验证学习心得
- 【Robot Framework】之 知识补充
- java--String转化各种进制
- 数据解析
- EF操作-删除记录
- synchronized锁的理解
- JVM调优总结(6):新一代的垃圾回收算法
- Mybatis中如何查询时间段内的数据
- ipython + notebook