美文网首页
表单验证求助:怎么封装一个方法,根据用户传入的验证规则和提示信息

表单验证求助:怎么封装一个方法,根据用户传入的验证规则和提示信息

作者: 极斗飞星 | 来源:发表于2017-06-15 09:43 被阅读0次

    首先,请看HTML页面代码简写:

    <form action="test.php" class="form">
    
        <h1 class="form_header">表单验证</h1>
        <hr/>
        <ul class="form_content">
            <li>
                <label for="">用户名</label>
                <input class="check" type="text" placeholder="请输入用户名"/>
    
                <div class="msg">
                    <i></i>
                    <span></span>
                </div>
            </li>
            <li>
                <label for="">用户户名</label>
                <input type="text" placeholder="请输入用户名"/>
    
                <div class="msg">
                    <i></i>
                    <span></span>
                </div>
            </li>
            <li>
                <label for="">用户户户名</label>
                <input class="check" type="text" placeholder="请输入用户名"/>
    
                <div class="msg">
                    <i></i>
                    <span></span>
                </div>
            </li>
            <li>
                <label for="">用户户户户名</label>
                <input class="check" type="text" placeholder="请输入用户名"/>
    
                <div class="msg">
                    <i></i>
                    <span>dsafdfadsfas</span>
                </div>
            </li>
            <li>
                <label for="">用户户户户户名</label>
                <input type="text" placeholder="请输入用户名"/>
    
                <div class="msg">
                    <i></i>
                    <span>gggggggggggg</span>
                </div>
            </li>
        </ul>
    
    </form>
    

    CSS代码:

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .form {
      width: 800px;
      min-height: 700px;
      background: #cccccc;
      margin: 50px auto;
    }
    .form_content {
      padding: 10px;
    }
    .form_content li {
      height: 68px;
    }
    .form_content li label {
      display: inline-block;
      vertical-align: middle;
      width: 120px;
      text-align: right;
    }
    .form_content li input {
      width: 268px;
      height: 30px;
      line-height: 30px;
      padding: 5px;
      border-radius: 5px;
      outline: none;
    }
    .form_content li .msg {
      display: inline-block;
      vertical-align: middle;
      position: relative;
    }
    .form_content li .msg i {
      display: inline-block;
      vertical-align: middle;
      width: 0;
      height: 0;
      position: absolute;
      border-width: 12px;
      border-style: solid;
      border-color: transparent #51a3cc transparent transparent;
      left: -14px;
      top: -14px;
    }
    .form_content li .msg span {
      display: inline-block;
      vertical-align: middle;
      position: absolute;
      left: 10px;
      top: -20px;
      text-align: left;
      padding: 10px;
      min-width: 120px;
      color: #ffffff;
      border-radius: 5px;
      background-color: rgba(51, 153, 204, 0.8);
    }
    

    需求:

    封装一个插件,该插件会遍历form表单里包含check的类,使用者调用该插件时只需传入对应的规则和提示信息即可,其它工作交给插件进行校验。该插件会根据用户的规则进行校验,如果验证通过则执行正确的回调,否则则把错误的显示信息显示出来。
    注①:在form表单中,需要进行校验的在该标签中添加一个check类,如
    <input class="check" type="text" placeholder="请输入用户名"/>
    注②:在HTML中有几个check类,则在调用时需要传入对应数量的规则。

    以下是我的代码构思,但是无法实现想要的效果,如果有哪位大神路过,请抽空指导一下,万分感激!
    JS代码:

     (function ($) {
        $.fn.forms = function (obj) {
    
            //var _this = this;
            var rules = obj.rules || [];
            var msg = obj.msg || [];
            //var checkID = obj.checkID || "";
    
            $("form .check").each(function (i, j) {
                $(this).keyup(function () {
                    if (obj.rules[i]) {
                        $(this).parent().siblings(".form_msg").hide();
                        $(this).addClass("right");
                        return false;
                    } else {
                        $(this).removeClass("right");
                        $(this).addClass("wrong");
                        $(this).parent().siblings(".form_msg").show();
                        if (msg) {
                            $(this).parent().siblings(".form_msg").children("span").html(msg[i]);
                        }
                    }
                });
            });
        };
    })(jQuery);
    
    //调用
    $(function () {
    
        $(".msg").hide();
    
        $(".form").forms({
            rules: ["$(this).val().length>5", "$(this).val() == 'TEST'", "", ""],
            msg: ["提示信息1", "提示信息2", "提示信息3", "提示信息4"]
        });
    
    });
    
    

    相关文章

      网友评论

          本文标题:表单验证求助:怎么封装一个方法,根据用户传入的验证规则和提示信息

          本文链接:https://www.haomeiwen.com/subject/wudyqxtx.html