本文主要是介绍JQurey实现表单验证,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<body>
<form class="registerform" action="formcheck.html"><ul><li><label class="label"><span class="need">*</span> 中文名:</label><input type="text" value="" name="name" class="inputxt" /></li><li><label class="label"><span class="need">*</span> 密码:</label><input type="password" value="" name="userpassword" class="inputxt" /></li><li><label class="label"><span class="need">*</span> 确认密码:</label><input type="password" value="" name="userpassword2" class="inputxt" /></li><li><label class="label"><span class="need">*</span> 所在城市:</label><select name="province" ><option value="">请选择城市</option><option value="1">瑞金市</option></select></li><li><label class="label"><span class="need">*</span> 性别:</label><input type="radio" value="1" name="gender" id="male" class="pr1" /><label for="male">男</label> <input type="radio" value="2" name="gender" id="female" class="pr1" /><label for="female">女</label></li><li><label class="label"><span class="need">*</span> 购物网:</label><input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox" value="1" /><label for="shoppingsite21">新蛋</label><input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox" value="2" /><label for="shoppingsite22">淘宝</label><input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox" value="3" /><label for="shoppingsite23">京东</label></li></ul><div class="action"><input type="submit" value="提 交" /> <input type="reset" value="重 置" /></div></form></body>
<link rel="stylesheet" href="css/style.css" type="text/css" /> <link href="css/demo.css" type="text/css" rel="stylesheet" /> <style> .registerform li{padding-bottom:20px;} .Validform_checktip{margin-left:10px;} .registerform .label{display:inline-block; width:70px;} .action{padding-left:92px;} </style><script type="text/javascript" src="js/jquery-1.8.0.min.js"> </script> <script type="text/javascript" src="js/Validform_v5.3.2_ncr_min.js"></script> <script type="text/javascript"> $(function(){//$(".registerform").Validform(); //就这一行代码!;var demo=$(".registerform").Validform({tiptype:3,label:".label",showAllError:true,datatype:{"zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/},ajaxPost:true});//通过$.Tipmsg扩展默认提示信息;//$.Tipmsg.w["zh1-6"]="请输入1到6个中文字符!";demo.tipmsg.w["zh1-6"]="请输入1到6个中文字符!";demo.addRule([{ele:".inputxt:eq(0)",datatype:"zh2-4"},{ele:".inputxt:eq(1)",datatype:"*6-20" },{ele:".inputxt:eq(2)",datatype:"*6-20",recheck:"userpassword" },{ele:"select",datatype:"*"},{ele:":radio:first",datatype:"*"},{ele:":checkbox:first",datatype:"*"}]);})</script>
这篇关于JQurey实现表单验证的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!