Question

如何用jquery进行表单验证

Answer 1

第一步：
导入jquery.metadata.js和jquery.validate.js。

第二步：
在提交表单上加属性id=“tempForm"。

第三步：
将提交按钮改为type="button"，且加入onclick="submitForm()"属性。

第四步：
在script中加入方法submitForm。

function submitForm() {
if($("#tempForm").valid()) {
$("#tempForm").submit();
}
}

第五步：
加入验证代码，格式如下：

$(function() {
$("#tempForm").validate({
rules: {
"cost.costMoney": {
required: true,
number: true,
maxlength:18
}
},
messages: {
"cost.costMoney": {
required: "<font color='red'>成本金额不能为空</font>",
number: "<font color='red'>成本金额必须为数字</font>",
maxlength:"<font color='red'>成本金额长度不能大于
18</font>"
}
}
});
});

6
第六步：
打开浏览器查看表单验证效果。

Answer 2

(1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载

(2)引入js

 <script src="jQuery.1.8.3.js" type="text/javascript"></script>
   <script src="jquery.validate.js" type="text/javascript"></script>

(3)按照插件的配置规则进行配置

代码实例:

JS代码：
　　

<script type="text/javascript">
        $(function () {
            $("#form1").validate({
                /*自定义验证规则*/
                rules:{
                    username:{ required:true,minlength:6 },
                    userpass:{ required:true,minlength:10 }
                },
                /*错误提示位置*/
                errorPlacement:function(error,element){
                    error.appendTo(element.siblings("span"));
                }
            });
        })
    </script>

　　
　　HTML代码：
　　

<form id="form1" action="#" method="post">
　　　　<p>用户登录</p>
　　　　<p>名称:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<p>密码:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<div>
　　　　　　<input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp;
　　　　　　<input id="btnReset" type="button" value="取消" class="btn" />&nbsp;&nbsp;
　　　　</div>
　　</form>

Answer 3

jquery validate
有现成的插件