简单的东西重复做,做多了之后,才能说熟能生巧。

做好一个精美的页面,固然是好,但是,一个页面除了写好之外,我们更需要的是将其功能完善。比如表单的验证,这只是众多工作之一。然后本次就以jQuery的validate插件,来学习记录一下表单验证部分。但愿自己下次在遇到写表单验证时,可以不费吹灰之力。

接下来就是验证代码展示:

  1 //身份证号验证
2 jQuery.validator.addMethod("isIdNo", function (value, element){
3 var id=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
4 return this.optional(element) || id.test(value);
5 });
6 //邮编验证
7 jQuery.validator.addMethod("isPostal", function(value, element) {
8 var tel = /^[0-9]{6}$/;
9 return this.optional(element) || (tel.test(value));
10 });
11 //手机号码验证
12 jQuery.validator.addMethod("isPhone", function (value, element) {
13 var length = value.length;
14 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
15 var tel = /^\d{3,4}-?\d{7,9}$/;
16 return this.optional(element) || (tel.test(value) || mobile.test(value));
17 });
18 //判断密码是否相同
19 jQuery.validator.addMethod("isSame", function(value, element) {
20 var pwd1 = document.getElementById("Pwd1").value;
21 return this.optional(element) || (pwd1.test(value));
22 });
23
24 jQuery.validator.addMethod("isSimliar", function(value, element) {
25 var ID1 = $("#ID01").val()
26 var ID2 = $("#ID02").val()
27 if(ID1 == ID2)
28 return true;
29 return this.optional(element);
30 });
31
32
33
34 //判断身份证号码是否相同
35 jQuery.validator.addMethod("isSimliar", function(value, element) {
36 var Idno = document.getElementById("ID01").value;
37 return this.optional(element) || (Idno.test(value));
38 });
39
40 $(document).ready(function(){
41 $(".form-inline").validate({
42 onsubmit: true,
43 debug: false,
44
45 rules:{
46 username:{
47 required:true
48
49 },
50 name:{
51 required:true
52 },
53 password:{
54 required:true
55 },
56 pswConfirm:{
57 required:true,
58 isSame:true
59
60 },
61 idNo:{
62 required:true,
63 isIdNo:true
64 },
65 idNoConfirm:{
66 required:true,
67 isSimliar:true
68 },
69 mobile:{
70 required:true,
71 isPhone:true
72 },
73 qq:{
74 required:true
75 },
76 major:{
77 required:true
78
79 },
80 email:{
81 required:true,
82 isPostal:true
83 },
84 address:{
85 required:true
86
87 },
88
89 },
90 messages:{
91 username:{
92 required:"用户名不能为空"
93 },
94 name:{
95 required:"姓名不能为空"
96 },
97 password:{
98 required:"密码不能为空"
99 },
100 pswConfirm:{
101 required:"密码不能为空",
102 isSame:"密码必须一致"
103
104 },
105 idNo:{
106 required:"身份证号不能为空",
107 isIdNo:"身份证格式错误"
108 },
109 idNoConfirm:{
110 required:"身份证号不能为空",
111 isSimliar:"身份证必须一致"
112 },
113 mobile:{
114 required:"手机号不能为空",
115 isPhone:"手机号码格式错误"
116 },
117 qq:{
118 required:"QQ号不能为空"
119 },
120 major:{
121 required:"专业不能为空"
122
123 },
124 email:{
125 required:"邮箱不能为空",
126 isPostal:"邮箱格式错误"
127 },
128 address:{
129 required:"邮箱地址不能为空"
130
131 },
132 },
133 error:function(span){
134 span.raddClass("error glyphicon glyphicon-remove");
135 },
136 });
137
138 });

其实,代码很简单,但是可能是因为自己忘记了一些内容,才导致自己写这段代码的耗时很长。记个笔记放在这里,多多复习巩固!

但实际上,如果对jQuery的使用比较熟练的话,可能会发现上述代码可以更加优化。注意需要写表示错误的css样式。

最终效果表示为:

比如说,上述中对密码的再次验证要求其相同,可以直接用equalTo,不用添加方法。

用一个图来记住:

本次写代码耗时较长的原因是:js中是没有equals()方法的,可以直接用 == 或者 is()方法直接代替。

最后用jQuery写得js文件还需要validate.js

很简单的代码,不能耗费太多的时间,不然,别人就开始质疑你的能力了。加油,Fighting!

每天都要进步一点,积少以成多。。。
转载自:http://www.cnblogs.com/zxcjj/p/5956519.html;

jQuery ------------> 验证表单的更多相关文章

  1. jQuery验证表单格式

    工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...

  2. jquery验证表单是否满足正则表达式是否通过验证例子

    //验证通用函数 a表示元素对象,b表示正则表达式,c存bool值 function testyz(a,b,c){ c=false; $(a).on("blur",function ...

  3. jquery验证表单代码

    代码如下: //开始验证-修改用户密码 $('.editUserPwd').validate({ /**//* 设置验证规则 */ rules: { lname:{ required:true, st ...

  4. jquery 验证表单信息

    /** * $().validate(json); * *rules:自定义规则 * *messages:提示信息 */ $(document).ready(function(){ $(". ...

  5. JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  7. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  8. jquery插件-表单验证插件

    JQuery 插件概述: 插件(plugin)也被成为扩展,是一种遵循一定规范的应用程序编写出来的程序,JQuery有大量 现成的插件. 一句话,JQuery插件就是别人依照Jquery官方规范写好的 ...

  9. 用 jQuery 实现表单验证(摘抄)

    ——选自<锋利的jQuery>(第2版)第5章的例题  5.1.5 表单验证 表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信 ...

随机推荐

  1. mac自定义安装nodejs步骤

    自定义安装的好处是nodejs相关的文件都在同一个文件夹下,且不与其它程序的文件混合在同一文件夹下. 1.下载node并解压缩:https://nodejs.org/dist/,选择tar.gz包下载 ...

  2. C#编程之委托与事件四(二)【转】

    C#编程之委托与事件(二)       我在上一篇文章(C#编程之委托与事件(一) )中通过示例结合的方法介绍了委托,在本文中,我同样以代码示例的方式来介绍C#里的事件机制. 二.事件   1.了解概 ...

  3. node crypto md5加密,并解决中文不相同的问题

    在用crypto模块时碰到了加密中文不相同的问题,多谢群里面@蚂蚁指定 1:解决中文不同的问题 function md5Pay(str) { str = (new Buffer(str)).toStr ...

  4. Caffe配置简明教程 ( Ubuntu 14.04 / CUDA 7.5 / cuDNN 5.1 )

    1. 前言 本教程使用的系统是Ubuntu 14.04 LTS 64-bit,使用的CUDA版本为7.5,使用的NVIDIA驱动版本为352. 如果您使用的Pascal架构显卡,如GTX1080或者新 ...

  5. iOS应用架构谈 网络层设计方案

    网络层在一个App中也是一个不可缺少的部分,工程师们在网络层能够发挥的空间也比较大.另外,苹果对网络请求部分已经做了很好的封装,业界的AFNetworking也被广泛使用.其它的ASIHttpRequ ...

  6. LeetCode Graph Valid Tree

    原题链接在这里:https://leetcode.com/problems/graph-valid-tree/ 题目: Given n nodes labeled from 0 to n - 1 an ...

  7. cocos2dx 3.x(实现帧动画(人物动画,跑马灯效果)的几种方法)

    //创建一个跑酷的精灵
  auto sprite = Sprite::create("1.png");
 //设置精灵的坐标
 sprite->setPosition(Ve ...

  8. Quartz.NET

    http://www.360doc.com/userhome.aspx?userid=11741424&cid=2#

  9. svg学习(八)polyline

    <polyline> 标签用来创建仅包含直线的形状. <?xml version="1.0" standalone="no"?> < ...

  10. 微信中修改title

    //需要jQuery.zepto版 function weixinTitle(){ var $body = $('body'); document.title = 'title'; // hack在微 ...