JQurey实现表单验证

本文主要是介绍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实现表单验证的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！