jQuery Validate表单验证(用户注册简单应用)

标签: jquery 表单 Validate
16人阅读 评论(0) 收藏 举报
分类:

1.讲解

1.1 Validate 要依赖jQuery的,所以HTML中js的引用关系如下:

        <script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>
        <script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>
        <script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>
        <script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>

第一个就不用说了,第二个是验证插件(必须引用),第三个是自定义验证规则,第四个我们自己的js

1.2 注册form的结构:

这里写图片描述

<form class="am-form am-form-horizontal yf-form-tips add-form">
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">用户名: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="text" id=""  name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">密码: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="password" id="password1"  name="addFormPass1" placeholder="请输入您的密码" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">确认密码: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="password" id=""  name="addFormPass2" placeholder="请再次输入您的密码" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormPhone" class="am-u-sm-2 am-form-label">手机号: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="text" id=""  name="addFormPhone" placeholder="请输入您的手机号" class="" maxlength="11">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">联系地址: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <textarea id="" placeholder="请输入您的联系地址" name="addFormAdd"  class="" maxlength="100"></textarea>
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <div class="am-u-sm-offset-2 yf-pl10">
                        <button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
                    </div>
                </div>
</form>

1.3 主要的js(blog-validate.js):

    //表单验证规则
    var formValid = $(".add-form").validate({
        rules: {
            "addFormName":{
                "required":true,        //必填字段
            },
            "addFormPass1":{
                "required":true        
            },
            "addFormPass2":{
                "required":true,
                "equalTo": "#password1"        //输入值必须和 #password1 相同
            },
            "addFormPhone":{
                "required":true,
                "digits":true,        //必须输入整数
                "minlength":11        //输入长度最小是 11
            },
            "addFormAdd":{
                "required":true        
            }
        },
        messages: {
            "addFormName":{
                "required":"用户名不能为空哦"
            },
            "addFormPass1":{
                "required":"密码不能为空哦"
            },
            "addFormPass2":{
                "required":"确认密码不能为空哦",
                "equalTo":"两次输入的密码不一致哦"
            },
            "addFormPhone":{
                "required":"手机号不能为空哦",
                "digits":"手机号格式不正确哦",
                "minlength":"手机号格式不正确哦",
            },
            "addFormAdd":{
                "required":"地址不能为空哦"
            }
        },
        errorPlacement:function(error,element) {
            error.appendTo(element.siblings(".yf-error-tip"));
        }
    });

    //提交前开始验证
    var submitInfo = function(){
        if($('.add-form').valid()){
            alert('恭喜你,验证通过了!');
        };
    }

说明:

  主要通过 $('.add-form').valid() 触发验证;

  提示信息可在 errorPlacement 中配置放置的位置,提示默认的样式是”error”,如需修改,参考validate ()可选项中的”errorClass”

2.有几个特别要注意的地方:

  1. validate ()的对象$(".add-form")对应的DOM标签必须是form标签
  2. 执行$(".add-form").validate时,form在HTML结构中是存在的,类似jquery的remove之后或者angularJs的ngIf,都会导致验证失败
  3. validate()的属性”rules”必须对应验证表单中标签的name属性
  4. 验证规则可以直接写在HTML中(不推荐,提示信息也不好处理),比如:
<input type="text" id=""  name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20" required minlength='2'>
查看评论

Jquery validate 的remote方法动态获取值

uid: { required: true, remote:{ url:"/frontpage/front-page!checkUid.action", type:"pos...
  • Heng_Ji
  • Heng_Ji
  • 2014-01-06 16:18:04
  • 2232

解决jQuery-validation框架remote校验只能返回true、false问题

默认jQuery-validation框架的remote远程校验只支持true、false返回值,不能满足那些需要返回具体冲突原因的特殊业务场景, 例如:数据重复,需要返回重复的那条数据的id,这时...
  • bbirdsky
  • bbirdsky
  • 2015-12-17 19:09:29
  • 4107

jquery validate 表单验证

  • 2010年01月05日 17:08
  • 35KB
  • 下载

使用jQuery validate插件验证表单

使用JQuery validate插件验证表单
  • sinat_19833881
  • sinat_19833881
  • 2017-02-28 17:06:22
  • 1462

表单验证插件jQuery.validate 介绍+快速入门案例

由于项目需要,学习了jQuery.validate表单验证插件,这是一款很好用的插件,功能强大又简单,现在把学到的东西记录下来,方便以后回顾。 jQuery.validate简介下边的介绍来自菜鸟教程...
  • Creabine
  • Creabine
  • 2016-04-13 14:12:09
  • 1477

jQuery validate 添加表单验证方法

给表单参数添加验证(jQury库的使用)准备工作:引入jQuery库 引入bootstrap库 引入jQuery validate库js文件:var Register = function() {...
  • qinnimei
  • qinnimei
  • 2016-04-06 14:48:09
  • 3196

Jquery validate表单验证Demo下载

  • 2013年09月23日 10:58
  • 43KB
  • 下载

jquery 表单验证插件制作注册表单提交验证

  • 2013年08月19日 11:22
  • 44KB
  • 下载

jQuery-Validate验证插件的使用步骤详解

我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。   记得以...
  • eson_15
  • eson_15
  • 2016-05-25 23:41:46
  • 54309

jquery---ajax异步提交+validate表单验证

$("#submitButton").click(function(){ //序列化表单 var param = $("#leaveSave").serialize(); $.aja...
  • markely
  • markely
  • 2014-04-30 16:07:49
  • 5170
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 146万+
    积分: 2万+
    排名: 494
    博客专栏
    文章分类
    微信公众号