以下代码进行对jQuery Validation的简单演示包括必填项、字符长度,格式验证

一、引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>

二、声明HTML片段

<form action="" id="jvForm">
  用 户 名:<input type="text" name="username"/></br>
  密    码:<input type="password" name="password" id="password"/></br>
  确认密码:<input type="password" name="confirm_password"/></br>
  出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option>
<option value="1">上海</option><option value="1">深圳</option></select></br>
  手    机:<input type="text" name="mobile" /></br>
  邮    箱:<input type="text" name="email" /></br>
  <input type="submit" value="提交" />
</form>

三、错误提示样式

<style type="text/css">
label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;}
</style>

四、验证代码

<script type = "text/javascript">
$(function() {
$("#jvForm").validate({
rules: {
username: { //用户名必填 至少3位
required: true,
minlength: 3
},
password: { //密码必填 至少6位
required: true,
minlength: 6
},
confirm_password: { //密码确认
required: true,
equalTo: "#password"
},
address: { //出生地必填
required: true
},
mobile: { //手机必填 验证格式
required: true,
mobile: true
},
email: { //email必填 验证格式
required: true,
email: true
}, },
messages: {
username: {
required: "用户名不能为空!",
minlength: "用户名至少三位!"
},
password: {
required: "密码不能为空!",
minlength: "密码至少六位!"
},
confirm_password: {
required: "密码确认不能为空!",
equalTo: "两次输入密码不一致 !"
},
address: {
required: "请选择出生地!",
},
mobile: {
required: "手机不能为空!",
mobile: "手机格式不正确",
},
email: {
required: "邮箱不能为空!",
email: "邮箱格式不正确",
},
}
});
})
</script>

因为jquery.validate.js中没有mobile验证,所以需要自己增加一个

首先找到messages 在里面添加mobile 如下:

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.",
mobile: "请填写正确的手机号码.",
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}.")
}

然后在methods中添加 mobile的正则校验

mobile: function( value, element ) {
return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value);
}

运行效果

jQuery Validation让验证变得如此容易(三)的更多相关文章

  1. jQuery Validation让验证变得如此easy(三)

    下面代码进行对jQuery Validation的简单演示包含必填项.字符长度,格式验证 一.引入文件 <script src="js/jquery-1.8.0.min.js" ...

  2. jQuery Validation让验证变得如此easy(一)

    一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...

  3. jQuery Validation让验证变得如此容易(一)

    一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...

  4. jQuery Validation让验证变得如此容易(二)

    上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required. 现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码 ...

  5. jQuery Validation让验证变得如此easy(二)

    上一个样例我们是统一引用jquery.validate.js这样全部必填字段的提示信息都将是This field is required. 如今要改成动态提示,比方姓名假设为空则提示姓名不能为空,密码 ...

  6. Jquery Validation 插件验证手机号

    自定义手机号验证代码  http://www.2cto.com/kf/201505/402781.html // 手机号码验证 jQuery.validator.addMethod("isM ...

  7. jquery validation ajax 验证

    <link href="${base}/res/basic/css/jquery/validationEngine/validationEngine.jquery.css" ...

  8. jquery validation 简单验证手机号码

    js代码 // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var lengt ...

  9. Jquery validation自定义验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Java设计模式之装饰者模式

    要实现装饰者模式,注意一下几点内容: 1.装饰者类要实现真实类同样的接口 2.装饰者类内有一个真实对象的引用(可以通过装饰者类的构造器传入) 3.装饰类对象在主类中接受请求,将请求发送给真实的对象(相 ...

  2. 表达式树 Expression

    转载泛型方法动态生成表达式树 Expression public string GetGridJSON(TraderInfo model) { IQueryable<TraderInfo> ...

  3. 【Espruino】NO.15 nRF24L01+无线收发器

    http://blog.csdn.net/qwert1213131/article/details/35853747 本文属于个人理解,能力有限,纰漏在所难免,还望指正! [小鱼有点电] [Espru ...

  4. 解决IIS7运行ASP提示错误:An error occurred on the server when processing the URL. Please contact the system administrator

    原文:解决IIS7运行ASP提示错误:An error occurred on the server when processing the URL. Please contact the syste ...

  5. quartz.net动态添加job

    quartz.net动态添加job设计-(五) 介绍 在实际项目使用中quartz.net中,都希望有一个管理界面可以动态添加job,而避免每次都要上线发布. 也看到有园子的同学问过.这里就介绍下实现 ...

  6. android简单的计算器

    所使用的算法:表达式求值(中缀表达式转后缀表达式,后缀表达式求值值) 不如何设计接口,有时间来美化! MainActivity.java package com.example.calculator; ...

  7. Guava之简介

    1.介绍 Guava最初是在2007年作为“Google Collection  Library” 出现的,这个项目在处理Java集合时提供了一些有用的工具,Google的这个guava项目已经成为了 ...

  8. valid number 判断字符串是否为有效数字

    RT,面试题,给定一个字符串判断是否为科学计数法的有效数字.此题各种繁琐考虑.今天终于学会了用有限状态机来处理.理解之后简洁易懂.在此分享我的理解推导思路,大有收获啊. 网上有解法说先记录每个状态代表 ...

  9. 一个web开发框架

    一个web开发框架 怎么才能成为一名架构师?需要具备哪些条件? 作为一名码农我迫切希望自己成为一个比较合格的web架构师,昨晚心血来潮小弟花了4个小时的时间整了个简易的web开发框架,由于第一次搭建框 ...

  10. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...