html之自定义插件升级版

来源：互联网发布：淘宝天猫优惠券好做吗编辑：程序博客网时间：2024/06/07 11:54

html文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>登录校验</title>    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">    <style>        .c1 {            margin-top: 100px;        }    </style></head><body><div class="container">    <div class="row">        <div class="col-md-4 c1 col-md-offset-4">            <form class="form-horizontal" id="login-form" novalidate>                <div class="form-group">                    <label for="userName" class="col-sm-2 control-label">用户</label>                    <div class="col-sm-10">                        <input type="text" class="form-control" id="userName" placeholder="请输入用户名"                               aria-describedby="helpBlock1" required="">                        <span id="helpBlock1" class="help-block"></span>                    </div>                </div>                <div class="form-group">                    <label for="pwdInput" class="col-sm-2 control-label">密码</label>                    <div class="col-sm-10">                        <input type="password" class="form-control" id="pwdInput" placeholder="请输入密码"                               aria-describedby="helpBlock2">                        <span id="helpBlock2" class="help-block"></span>                    </div>                </div>                <div class="form-group">                    <div class="col-sm-offset-2 col-sm-10">                        <div class="checkbox">                            <label>                                <input type="checkbox"> 记住我                            </label>                        </div>                    </div>                </div>                <div class="form-group">                    <div class="col-sm-offset-2 col-sm-10">                        <button type="submit" class="btn btn-default">登录</button>                    </div>                </div>            </form>        </div>    </div></div><script src="jquery-3.2.1.js"></script><script src="bootstrap-3.3.7/js/bootstrap.min.js"></script><script src="myValidateV2.js"></script><script>    $(function () {        //这种方式this会自动传入校验函数        //key值为input的id,这样才能关联        $('#login-form').myValidate({'userName':{'min-length':6}})    });</script></body></html>

js文件

;(function (jQ) {    jQ.fn.extend({        'myValidate': function (args) {            //对象就是this,直接就是jQuery对象            var $form = this;            //设立标志位，如果flag为false时return false，阻止表单提交默认事件            var flag = true;            $form.find(':submit').click(function () {                $form.find('.form-group').removeClass('has-error');                $form.find('span').text('');                //只校验必填项                $form.find('input[required=""] ').each(function () {                    if (jQ(this).val() === '') {                        flag = false;                        jQ(this).parent().parent().addClass('has-error');                        var sValue = jQ(this).parent().prev().text();                        jQ(this).next().html(sValue + '不能为空！');                        return false;                    }                    //判断长度                    var userId = jQ(this).attr('id');                    var minLength = args[userId]['min-length'];                    if (minLength !== undefined) {                        if (jQ(this).val().length < minLength) {                            jQ(this).parent().parent().addClass('has-error');                            var sVal = jQ(this).parent().prev().text();                            jQ(this).next().html(sVal+'长度必须大于6位！');                            //标志位置为false                            flag = false;                            //结束循环                            return false;                        }                    }                });                //flag为false时阻止表单提交                return flag;            });        }    })})(jQuery);

阅读全文

0 0