Jquery Validation表单验证 & 手机号验证
Jquery Validation简介
Jquery Validation插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。目前版本是 1.13.1(截止:2015.05.26)。
HTML引用文件部分
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> <!-- 引入jquery --> <script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js"></script> <!-- validate插件 --> <script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js"></script> <!-- validate中文提示 -->
表单部分
<form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>验证完整的表单</legend> <p> <label for="username">用户名</label> <input id="username" name="username" type="text"> </p> <p> <label for="password">密码</label> <input id="password" name="password" type="password"> </p> <p> <label for="confirm_password">验证密码</label> <input id="confirm_password" name="confirm_password" type="password"> </p> <p> <label for="email">Email</label> <input id="email" name="email" type="email"> </p> <p> <label for="telephone">手机号</label> <input id="telephone" name="telephone" type="text"> </p> <p> <input class="submit" type="submit" value="提交"> </p> </fieldset> </form>
自定义手机号码验证部分
jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^1[0-9]{10}$/; // 或者 var mobile = /^1[3,4,5,7,8][0-9]{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码");
javascript部分(包含自定义手机号码验证)
$().ready(function() {//表单验证 // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^1[0-9]{10}$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); // 在键盘按下并释放及提交后验证提交表单 $("form").validate({ rules: { username: "required", password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" }, email: { required: true, email: true }, telephone:{ required: true, maxlength:11, maxlength:11, isMobile:true } }, messages: { username: "请输入用户名", password: { required: "请输入密码", minlength: "密码长度不能小于 6 个字母" }, confirm_password: { required: "请输入确认密码", minlength: "密码长度不能小于 6 个字母", equalTo: "两次密码输入不一致" }, email: "请输入一个正确的邮箱", telephone: { required: "请输入手机号", maxlength:"请填写11位的手机号", maxlength:"请填写11位的手机号", isMobile:"请填写正确的手机号码" } } }); });
错误提示信息示例如下
<p> <label for="password">密码</label> <input id="password" name="password" type="password" aria-required="true" class="error" aria-invalid="true"> <label id="password-error" class="error" for="password">密码长度不能小于 6 个字母</label> </p>
若希望提示信息突出显示,为 error 设置样式即可。如
.error{color:red;}