validate与submit

来源:互联网 发布:罗斯数据 编辑:程序博客网 时间:2024/06/05 17:43

jQuery Validate 插件为表单提供了强大的验证功能,在使用validate.js进行表单的验证时,需要引入一下3个文件:

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> //中文提示包



而validate需要submit的时候才有验证,如何不使用submit的时候,也可以使用表单的验证:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>


<style>

.error {

    color: red;

}

</style>

</head>

<body>

    <form class="cmxform"id="signupForm" action="">

        <fieldset>

            <legend>验证完整的表单</legend>

            <!--required的验证-->

            <p>

                <label for="firstname">名字</label> <inputid="firstname"

                    name="firstname"type="text"required="required">

            </p>

          

            <p>

                <label for="password">密码</label> <inputid="password"

                    name="password"type="password"required="required">

            </p>

          <!--email的验证-->

            <p>

                <label for="email">Email</label> <inputid="email"name="email"

                    type="email">

            </p>

            <!--url的验证-->

            <p>

                <label for="url">Url</label> <inputid="url"name="url"

                    type="url">

            </p>

            <!--手机号码的验证-->

            <p>

                <label for="tel">tel</label> <inputid="tel"name="tel"

                    type="tel"pattern="^[0-9]{7,12}$">

            </p>

            <!--日期的验证-->

            <p>

                <label for="date">date</label> <inputid="date"name="date"

                    type="date">

            </p>

            <!--日期格式的验证-->

            <p>

                <label for="dateISO">dateISO</label> <inputid="dateISO"name="dateISO"

                    type="dateISO">

            </p>

            <!--number的验证-->

             <p>

                <label for="number">number</label> <inputid="number"name="number"

                    type="number">

            </p>

          

            

            <p>

                <inputclass="submit"type="submit"value="提交">

                <button class="button nihao"type="button">提交2</button>

            </p>

        </fieldset>

    </form>

</body>

<script>

    var vali;

    vali=$("#signupForm").validate()

      

    $('.nihao').click(function(){

        if (vali.form()) {


        } else {


        }

    })

    

   

</script>

</html>

当我们点击非submit的时候,也可以进行验证……



原创粉丝点击