如何用jquery进行表单验证

 我来答
育知同创教育
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
第六步:
打开浏览器查看表单验证效果。
果爸老石
2016-06-14 · TA获得超过813个赞
知道小有建树答主
回答量:538
采纳率:75%
帮助的人:177万
展开全部

(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>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
潘多拉de情夫
2016-05-26 · TA获得超过247个赞
知道小有建树答主
回答量:572
采纳率:0%
帮助的人:353万
展开全部
jquery validate
有现成的插件
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式