如何用jquery进行表单验证

第一步：
导入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: "成本金额不能为空",
number: "成本金额必须为数字",
maxlength:"成本金额长度不能大于
18"
}
}
});
});

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

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

(2)引入js

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

代码实例:

JS代码：
　　

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

　　
　　HTML代码：
　　

　　　　
用户登录

　　　　
名称:

　　　　
密码:

　　　　

　　　　　　  
　　　　　　  
　　　　

　　

jquery validate
有现成的插件