如何用jquery进行表单验证
3个回答
2016-05-22 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
第一步：
导入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
第六步：
打开浏览器查看表单验证效果。
导入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
第六步：
打开浏览器查看表单验证效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
七鑫易维信息技术
2024-09-02 广告
Play Video 七鑫易维是致力于机器视觉和人工智能领域的高新科技企业，迄今已专注眼球追踪技术的研发、创新与应用超过14年，拥有完全自主知识产权，全球专利总量655余项。 作为眼球追踪技术领域的全球知名品牌，七鑫易维的产品体系覆盖眼动分...
点击进入详情页
本回答由七鑫易维信息技术提供
展开全部
(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" />
<input id="btnReset" type="button" value="取消" class="btn" />
</div>
</form>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jquery validate
有现成的插件
有现成的插件
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
