跟着项目做了一个小功能,自己不会js和jquery,硬着头皮写起了js,后来发现需要对输入框进行数据必填项校验,还有一些数据格式校验等,后来别人看了我写的一大堆js就笑了,告诉我用jquery的插件就可以了,直接拿过来使用就好,于是就自己写了一个简单的校验,
对于jq validate网络上有很多的资源可以去查,在这里不赘述,闲话少叙,上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery校验学习 </title> <script type="text/javascript" src="../js/lhgdialog/jquery-1.7.1.min.js"></script> <script src="../js/validate/jquery.validate.js" type="text/javascript"></script> <script src="../js/validate/messages_cn.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#username").focus(); $("#inputForm").validate({ rules: { username: { required: true }, password:{ required: true }, checkboxs:{ required:true }, radios:{ required:true }, selectone:{ required:true } }, messages: { username: { required: "请输入用户名" }, password: { required: "请输入密码" }, checkboxs:{ required: "请勾选复选框" }, radios:{ required: "请勾选单选框" }, selectone:{ required: "请选择下拉框" } }, errorPlacement: function(error, element) { if(element.is(':radio')||element.is(':checkbox')) { //var eid = element.attr("name");不知道为啥从网上找到的会有这一行 error.appendTo(element.parent()); }else{ //var selector = "[name='" + element.attr("name") + "']"; //error.insertAfter($(selector)); 这两句是原来工程里的代码,我改成了下面这个也没错, error.insertAfter(element); } } }); }); </script> <style type="text/css"> #forminfo dl dt{width:200px;} </style> </head> <body> <div ><input type="button" name="check" value="check" onclick="validate();"></input></div> <div id = "content"> <form id="inputForm" action="study.html" method="post"> <table> <tr> <td>username:</td> <td> <input type='text' name='username' id='username'></input> </td> </tr> <tr> <td>技能</td> <td> <input type="checkbox" name="checkboxs" value="checkbox1">1</input> <input type="checkbox" name="checkboxs" value="checkbox2">2</input> <input type="checkbox" name="checkboxs" value="checkbox3">3</input> </td> </tr> <tr> <td>密码</td> <td> <input type='text' name='password' ></input> </td> </tr> <tr> <td>单选框</td> <td> <input type="radio" name="radios" value="checkbox1">1</input> <input type="radio" name="radios" value="checkbox2">2</input> <input type="radio" name="radios" value="checkbox3">3</input> </td> </tr> <tr> <td>下拉框</td> <td> <select name="selectone" > <option value="">请选择</option><!-- jquery校验的是value为空的时候会有提示,所以没有这一行的话这个select校验永远为真--> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> <tr> <td> <input type="submit" name="submit"></input> </td> <td></td> <td></td> </tr> </table> </form> </div> </body> </html>
新的问题来了,其实我要在页面上通过js拼接一个json串,所以我的拼接数据的项不再form里,拼接好的数据才会在form里,
那我的问题是,如何通过jquery校验非form表单的数据呢,虽然实用性不大,但把问题抛出来,希望有大神看到了,指点一下!万分感谢
update:!
当提交不是通过submit的时候可以尝试 button 的click方法
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $("#form").submit(); } });
可以尝试下,