最近在做表单的时候头疼过表单验证的问题;
在做v9二次开发的时候就发现它本事就有一个表单验证功能, 今天仔细看看, 原来用的是formvalidator, 功能强大
下面是自己尝试做的DEMO, 比较简单, 手册链接 http://www.yhuan.com/doc/index.html
<html>
<head>
<title>JS表单验证</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/formvalidator.js" type="text/javascript"></script>
<script src="js/formvalidatorregex.js" type="text/javascript"></script>
<script>
$(function(){
$.formValidator.initConfig({autotip:true,formid:"myform",onerror:function(msg){}});
$("#realname").formValidator({onshow:"请输入你的真实姓名",onfocus:"至少2个汉字",oncorrect:"完成"}).inputValidator({min:4,onerror:"姓名长度不足"});
$("#qqnum").formValidator({onshow:"请输入你的QQ号码",onfocus:"请输入你的QQ号码",oncorrect:"完成"}).inputValidator({min:6,onerror:"QQ号码长度不足"}).regexValidator({regexp:"^\\d{6,12}$",onerror:"QQ号格式不正确"});
$("#moblie").formValidator({onshow:"请输入你的手机号码",onfocus:"请输入你的手机号码",oncorrect:"完成"}).inputValidator({min:11,onerror:"手机号码长度不足"}).regexValidator({regexp:"^\\d{11}$",onerror:"手机号格式不正确"});
$("#address").formValidator({onshow:"请输入你的家庭地址",onfocus:"请尽量填写完整, 方便日后联系",oncorrect:"完成"}).inputValidator({min:6,onerror:"家庭地址不够详细"});
$("#b_school").formValidator({onshow:"请选择所属校区",onfocus:"请选择所属校区",oncorrect:"完成"}).inputValidator({min:1,onerror:"你还没选择校区"});
});
</script>
</head>
<body>
<form id="myform" action="" method="post">
真实姓名:<input type="text" id="realname" /><div id="realnameTip"></div><br />
QQnum:<input type="text" id="qqnum" /><div id="qqnumTip"></div><br />
手机号码:<input type="text" id="moblie" /><div id="moblieTip"></div><br />
家庭地址:<input type="text" id="address" /><div id="addressTip"></div><br />
所属校区:<select id="b_school">
<option value="">请选择</option>
<option value="1">江南校区</option>
<option value="2">怡乐校区</option>
</select><div id="b_schoolTip"></div><br />
</form>
</body>
</html>
1940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
