validate与submit

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

而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> <input id="firstname"

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

            </p>

          

            <p>

                <label for="password">密码</label> <input id="password"

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

            </p>

          <!--email的验证-->

            <p>

                <label for="email">Email</label> <input id="email" name="email"

                    type="email">

            </p>

            <!--url的验证-->

            <p>

                <label for="url">Url</label> <input id="url" name="url"

                    type="url">

            </p>

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

            <p>

                <label for="tel">tel</label> <input id="tel" name="tel"

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

            </p>

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

            <p>

                <label for="date">date</label> <input id="date" name="date"

                    type="date">

            </p>

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

            <p>

                <label for="dateISO">dateISO</label> <input id="dateISO" name="dateISO"

                    type="dateISO">

            </p>

            <!--number的验证-->

             <p>

                <label for="number">number</label> <input id="number" name="number"

                    type="number">

            </p>

          

            

            <p>

                <input class="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的时候,也可以进行验证……