基于Bootstrap+jQuery.validate Form表单自定义验证实践

发布时间:2017-02-22 编辑:小张个人博客 查看次数:5298

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。

首先引入bootstrap相关文件和jQuery Validate 插件

<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery-validate.js"></script>
<script src="./js/bootstrap.min.js"></script>

bootstrap表单实现代码如下:

<div class="container">
<h3>米廷传媒_大众评审资料提交</h3>
    <form name="form" action="./user.php" method="post">
        <div class="form-group ">
            <label for="exampleInputEmail1">姓名:</label>
            <input type="text" name="user" class="form-control" id="exampleInputEmail1" placeholder="姓名">
        </div>
        <div class="form-group ">
            <label for="exampleInputEmail2">手机号:</label>
            <input type="text" name="call" class="form-control" id="exampleInputEmail2" placeholder="手机号码">
        </div>
        <div class="form-group ">
            <label for="exampleInputEmail3">年龄:</label>
            <input type="text" name="age" class="form-control" id="exampleInputEmail3" placeholder="年龄">
        </div>
        <div class="form-group">
            <label class="radio-inline">
                <input type="radio" name="sex" id="inlineRadio2" value="1"> 男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" id="inlineRadio3" value="2"> 女
            </label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>

</div>

jQuery Validate自定义验证表单部分:

<script>

   // jQuery Validate 表单验证
    // 自定验证方法
    // 以字母开头,5-17 字母,数字,下划线
    jQuery.validator.addMethod("user", function(value, element) {
        var tel = /^[\u0391-\uFFE5]+$/;
        return this.optional(element) || (tel.test(value));
    }, "真实姓名必须是中文!");
   jQuery.validator.addMethod("call", function(value, element) {
       var tel =/^[1][3578][0-9]{9}$/;
       return this.optional(element) || (tel.test(value));
   }, "请填写正确的手机号!");
   jQuery.validator.addMethod("age", function(value, element) {
       var tel =/^(1[6-9]|[2-9][0-9])$/;
       return this.optional(element) || (tel.test(value));
   }, "年龄16岁以上!");
   $('form[name=form]').validate({
        // 错误提示信息放span标签里
        errorElement: 'span',
        // 验证规则
        rules:{
            // 验证用户名
            user: {
                required: true,
                user: true     // 调用自定义方法

            },
            // 验证密码
            call:{
                required: true,
                call: true    // 调用自定义方法
            },
            age:{
                required: true,
                age: true
            }
        },
        // 设置提示信息
        messages : {
            user: {
                required: '姓名不能为空'
            },
            age:{
                required: '请填写年龄'

            },
            call:{
                required: '请填写手机号码'
            }
        }
    });
</script>

jQuery Validate 插件为表单提供了强大的验证功能,我这里举的例子只是jQuery Validate其中一部分
大家要是有兴趣可以好好的研究一下这款插件。

出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号