JS formvalidator 表单验证试用

来源：互联网发布：it服务管理平台编辑：程序博客网时间：2024/06/09 18:14

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

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