Jquery Validation表单验证 & 手机号验证

原创 2018年04月16日 16:25:03

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;}

手机号验证,为jquery-validation添加自定义验证方式,以及Ajax提交form表单

由于validtion 没有手机号验证这个功能,所以只好添加自定义的验证方式。代码如下:// 手机号码验证 jQuery.validator.addMethod("isMobile", fun...
  • well2049
  • well2049
  • 2017-11-17 13:22:16
  • 427

Jquery Validation 插件验证手机号

Jquery Validation 插件验证手机号
  • limenghua9112
  • limenghua9112
  • 2015-05-26 16:20:07
  • 11580

jquery validation表单验证,自定义字段验证

首先导入三个js支持 js代码 /* 验证通过之后回调方法 */ $.validator.setDefaults({ submitHandler: ...
  • Yanci_
  • Yanci_
  • 2017-08-15 15:35:28
  • 354

利用validation实现spring 表单的数据验证

对于表单的验证一直是个难的问题,看别人的代码发现了,可以用alidate jar 与hibernate-alidate jar来实现验证,可以对表单数据进行封装,然后给spring mvc contr...
  • lilovfly
  • lilovfly
  • 2016-08-04 00:03:14
  • 1292

jQuery验证表单插件——jquery-validation

jQuery验证表单插件——jquery-validation The jQuery Validation Plugin provides drop-in validation for your ...
  • q547550831
  • q547550831
  • 2016-09-25 15:09:43
  • 1094

[前端] jquery验证手机号、身份证号、中文名称

验证: 中文姓名、手机号、身份证和地址 HTML(表单): form action=""> div class="form-group"> label>姓名:label>...
  • u010081689
  • u010081689
  • 2015-12-17 14:09:15
  • 6518

jQuery表单验证插件Validation中两种自定义验证信息的方法

方法一:在使用Class属性值的内部添加messages如下:      一个简单的验证带验证提示的评论例子          姓名      * class="{validate:{...
  • qingliuFu
  • qingliuFu
  • 2016-08-30 20:51:03
  • 2279

jquery.validationEngine 自定义验证的使用方法

一: 自定义验证规则 (1)  方法1 ,定义验证规则 $.validationEngineLanguage.allRules.name = { "regex": ...
  • zsg88
  • zsg88
  • 2017-04-24 15:58:06
  • 2901

让jquery validation plugin 支持zepto

欢迎使用Markdown编辑器写博客做移动端快一年了,一直纠结移动端是用zepto还是用jquery,移动端一直倾向于使用zepto,无奈zepto相关插件太少了,为了让jquery插件支持zepto...
  • weizengxun
  • weizengxun
  • 2015-03-25 00:29:11
  • 6444

基于jQuery的表单验证插件Validation Engine

Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。 附件提供了该插件,解压密码为:im4...
  • amohan
  • amohan
  • 2013-09-24 18:45:59
  • 3634
收藏助手
不良信息举报
您举报文章:Jquery Validation表单验证 & 手机号验证
举报原因:
原因补充:

(最多只允许输入30个字)