JS validate校验框架使用方式

JS validate校验框架使用方式

1.引入JS

<script src="/assets/js/validate-methods.js"></script>
<script src="/assets/js/jquery.validate.js"></script>
<script src="/assets/js/messages_zh.js"></script>

2.两种使用方式

第一种

1.初始化form

$().ready(function() {
      $("#myform").validate() 
});

2.提交form事件

function update() {
    // 数据校验
    var validRet = $("#myform").valid();
    if (!validRet) {
        return;
    }

     //逻辑
}

3.Jsp

<form id="myform" method="post" action="">
            <p>
                <label for="cemail">输入框：</label>
                <input id="cemail" name="cemail" type="email" required/>
            </p>
            <button type="button" onclick="update();">提交                      </button>
            <!-- <input class="submit" type="submit" value="验证"/>-->

        </form>

其它参数具体请参考http://www.runoob.com/jquery/jquery-plugin-validate.html

第二种

1.初始化form

$().ready(function() {
      $("#myform").validate({
         rules: {
             cip: {
                    required: true,//validate 属性（自带的或者扩展的）
                    ip: true   //validate 属性（自带的或者扩展的）
                  }
        },
        messages: {
//如果没有提示就是用下面默认提示，一般不用配置
        //  cip: {
        //       required: "请输入IP",
        //       ip: "IP格式不正确"
        //    }
         }
        }) 
});

2.提交form事件

function update() {
    // 数据校验
    var validRet = $("#myform").valid();
    if (!validRet) {
        return;
    }

     //逻辑
}

Jsp：

<form id="myform" method="post" action="">
            <p>
                <label for="cip">输入框：</label>
                <input id="cip" name="cip" type="text"/>
            </p>
            <button type="button" onclick="update();">提交                      </button>
            <!-- <input class="submit" type="submit" value="验证"/>-->

        </form>

其它扩展参数在validate-methods.js中
实例参考：https://blog.csdn.net/jackiehome/article/details/42348653

validate-methods.js 要去上面网址中COPY。不过里面
// 判断是否包含中英文特殊字符，除英文”-_”字符外 这个方法报错，需要注释掉