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

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

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

 //身份证号验证
jQuery.validator.addMethod("isIdNo", function (value, element){
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)$/;
return this.optional(element) || id.test(value);
});
//邮编验证
jQuery.validator.addMethod("isPostal", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
});
//手机号码验证
jQuery.validator.addMethod("isPhone", function (value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
});
//判断密码是否相同
jQuery.validator.addMethod("isSame", function(value, element) {
var pwd1 = document.getElementById("Pwd1").value;
return this.optional(element) || (pwd1.test(value));
}); jQuery.validator.addMethod("isSimliar", function(value, element) {
var ID1 = $("#ID01").val()
var ID2 = $("#ID02").val()
if(ID1 == ID2)
return true;
return this.optional(element);
}); //判断身份证号码是否相同
jQuery.validator.addMethod("isSimliar", function(value, element) {
var Idno = document.getElementById("ID01").value;
return this.optional(element) || (Idno.test(value));
}); $(document).ready(function(){
$(".form-inline").validate({
onsubmit: true,
debug: false, rules:{
username:{
required:true },
name:{
required:true
},
password:{
required:true
},
pswConfirm:{
required:true,
isSame:true },
idNo:{
required:true,
isIdNo:true
},
idNoConfirm:{
required:true,
isSimliar:true
},
mobile:{
required:true,
isPhone:true
},
qq:{
required:true
},
major:{
required:true },
email:{
required:true,
isPostal:true
},
address:{
required:true }, },
messages:{
username:{
required:"用户名不能为空"
},
name:{
required:"姓名不能为空"
},
password:{
required:"密码不能为空"
},
pswConfirm:{
required:"密码不能为空",
isSame:"密码必须一致" },
idNo:{
required:"身份证号不能为空",
isIdNo:"身份证格式错误"
},
idNoConfirm:{
required:"身份证号不能为空",
isSimliar:"身份证必须一致"
},
mobile:{
required:"手机号不能为空",
isPhone:"手机号码格式错误"
},
qq:{
required:"QQ号不能为空"
},
major:{
required:"专业不能为空" },
email:{
required:"邮箱不能为空",
isPostal:"邮箱格式错误"
},
address:{
required:"邮箱地址不能为空" },
},
error:function(span){
span.raddClass("error glyphicon glyphicon-remove");
},
}); });

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

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

最终效果表示为:

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

用一个图来记住:

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

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

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

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

  1. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  2. jquery.validate验证表单

    添加引用 <script src="/${appName}/commons/js/validate/jquery.validate.min.js"></scrip ...

  3. Jquery validate验证表单时多个name相同的元素只验证第一个的问题

    下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jquery. ...

  4. jquery.validate验证表单配合回调提交和h5.storage本地保存笔记

    表单验证插件我使用:jquery.validate.js 支持中文提示,可扩展性强!教程地址 本地保存状态信息使用:h5提供的storage,浏览器支持5m的存储量,存储类型必须是string类型,并 ...

  5. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

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

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

  7. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  8. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  9. jquery php ajax 表单验证

    本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送.   .创建一个表单 html 页面   表单部分 html 代码   以下为引用内容: &l ...

随机推荐

  1. mongdb 一些操作

    一.命令操作数据库1.管理员身份打开cmd2.进到mongdb的mongo.exe文件所在路径3.show dbs 查看mongodb4.连接远程数据库:mongo ip:端口/数据库5.打开某个数据 ...

  2. oracle用户创建及权限设置(转)

    权限: create session create table unlimited tablespace connect resource dba 例: #sqlplus /nolog SQL> ...

  3. MySql学习笔记04

    复习 day01 数据库相关: create database db4 character set utf8; show databases; show create database db4; dr ...

  4. Linux产生随机数的几种方法

    .echo $RANDOM .openssl rand -base64 .date +%n%N .head /dev/urandom |cksum .cat /proc/sys/kernel/rand ...

  5. CSS 实现单行、多行文本溢出显示省略号

    单行溢出 width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-o ...

  6. 传智 杨中科老师 ASP.NET 笔记

  7. JZOJ 5455. 【NOIP2017提高A组冲刺11.6】拆网线

    455. [NOIP2017提高A组冲刺11.6]拆网线 (File IO): input:tree.in output:tree.out Time Limits: 1000 ms  Memory L ...

  8. HOJ_14001 Just Terraffic!

    题意相对来说比较扭曲..所以来说下模型,具体做法有兴趣的孩纸去问度娘或者波塞冬吧~~ 给出一个序列长度,并且输入该序列,该序列的含义是横坐标: 任何两个相邻坐标绝对值小于等于1000的必然为一个整体, ...

  9. 【转】Python操作MongoDB

    Python 操作 MongoDB   请给作者点赞--> 原文链接 这篇文章主要介绍了使用Python脚本操作MongoDB的教程,MongoDB作为非关系型数据库得到了很大的宣传力度,而市面 ...

  10. Git的安装及常用操作

    一.Git的安装 1.下载Git,官网地址为:https://git-scm.com/downloads.     2.下载完成之后,双击目录进行安装 3.选择安装目录 4.选择组件,默认即可 5.设 ...