JQurey实现表单验证

最新推荐文章于 2021-06-22 17:58:14 发布

小衰奋斗中

最新推荐文章于 2021-06-22 17:58:14 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb 文章标签：表单验证

本文链接：https://blog.youkuaiyun.com/u011347802/article/details/84737070

JavaWeb 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的在线注册表单，包含用户名、密码、确认密码、所在城市、性别和购物网站选择等功能，并详细解释了如何使用JavaScript进行表单验证。

<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>