JS formvalidator 表单验证试用

最近在做表单的时候头疼过表单验证的问题;

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





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值