JS表单验证（⽤正则表达式,⽤字符串验证）
JS表单验证
JS运⾏在客户端的代码，通过在客户端对表单进⾏格式的验证可以避免⼤量不合法的数据提交到服务器，这样就可以减轻服务器端的压⼒。表单的验证可以使⽤正则表达式进⾏验证
正则表达式对象的创建分为两种⽅法
1 . var regobj = /表达式内容/;
2. var regobj = new RegExp(“表达式内容”);
⼀般使⽤第⼀种⽅法创建
正则表达式的内容可以是简单的也可以是复合的
简单内容直接就是⼀个字符串: var regobj = /^xiaoli$/;
最简单的⼀个验证⽅法:
<script language="JavaScript">
function checkName(){
//定义验证规则
var namereg = /^xiaoli$/;
//namereg = new RegExp();
//获取表单上某⼀个空间的值存在两种⽅法: 1: getElementById()的⽅法获取，需要为控件指定⼀个ID值
//通过document.表单名.控件名.value的⽅法获取，需要为form标签提供name属性，需要为控件提供name属性
//获取⽤户输⼊的⽤户名信息
//var namestr = ElementById("txtName").value;
//通过表单的名称获取控件的值
var namestr = Name.value;
//验证处理利⽤正则表达式对象的 test ⽅法去验证⽬标字符串是否符合验证的规则，返回值为boolean
st(namestr)){
alert("验证成功");
return true;
}else{
alert("验证失败");
return false;
}
}
</script>
</head>
<body>
<form action="index.html" method="post" name="regForm" onsubmit="return checkName()">
⽤户名:<input type="text" name="txtName" id="txtName" /><br/>
<input type="submit" value="提交" />
</form>
</body>
注意的点:
⼀：获取表单上某⼀个空间的值存在两种⽅法: 1: ElementById()的⽅法获取，需要为控件指定⼀个ID值
通过document.表单名.控件名.value的⽅法获取，需要为form标签提供name属性，需要为控件提供name属性
⼆：如果进⾏表单验证，验证⽅法必须要返回⼀个boolean类型的结果
三：调⽤验证的验证的⽅法，是在form表单的onsubmit事件中调⽤，且调⽤的时候必须添加return <form οnsubmit=”return checkFomr()”>
四：如果使⽤正则表达式验证，⼀般需要设定头和尾的结束表⽰ var regname=/^验证规则$/
^表⽰以什么开头, $表⽰以什么结尾.
五：验证的时候需要使⽤的是正则表达式的test ⽅法获取验证的结果
正则表达式通过内容需要添加⼀些通配符实现规则验证
^ 必须以表达式开始
$必须以表达式结束
//正则表达式通配符的标识
//\s 单个空⽩字符
//\S 单个⾮空⽩字符
//\d 单个数字
//\D 单个⾮数字
//\w 单个字符(数字，字母，下划线)
//\W ⾮单个字符(除去数字，字母，下划线) //[a,b,c,1-9] 单个a,b,c和1到9中任意字符//次数
//{n} 固定n次
//{n,} 最少n次
//{n,m} 最少n次最多m次
//{,m} 最多m次
//+ 最少1次最多不限制，等同于{1,}
//? 0次或1次 ，等同于{0,1}
//* 0次或多次 ，等同于{0,}
利⽤正则表达式实现表单的验证
/
/⽤户名只能有数组字母下划线组成，长度4-6位
function checkName(){
//定义验证规则
var namereg=/^\w{4,6}$/;
//获取验证内容
var Name.value;
//实现验证
if(!st(namestr)){
return false;
}
return true;
}
//⽤户年龄必须是数字最多两位
function checkAge(){
//定义验证规则
var agereg=/^\d{2}$/;
//获取验证内容
var Age.value;
/
/实现验证
if(!st(agestr)){
return false;
}
return true;
}
function checkForm(){
if(checkName() && checkAge())
{
return true;
}
return false;
}
</script>
样式表效果
<style type="text/css">
.info_success{ background-color: #7FFF00; color: green;}
.info_error{ color: red; background-color: #808080;}
</style>
页⾯效果
<form action="index.html" method="post" name="regForm" onsubmit="return checkForm()">
⽤户名:<input type="text" name="txtName" id="txtName" /><span id="namespan"></span> <br/>
⽤户年龄:<input type="text" name="txtAge" id="txtAge" /><span id="agespan"></span> <br/>
<input type="submit" value="提交" />
</form>
表单的验证需要在表单的onSubmit 中添加⽅法，如果验证的⽅法返回为false则表单不提交，如果返回值为true 则表单提交
<form action="head.html" method="get" name="registerForm"
onsubmit="return checkForm()">
正则表达式的简单⽤法
//只能出现字母,⼀次到多次
var namereg = /^[a-z,A-Z]+$/;
//定义AGE的正则表达式(年龄必须在10-29之间)
var ageReg = /^[1,2]\d$/;
//密码必须是数字字母下划线，数字不能开头，长度6-8位
var passReg = /^[a-z,A-Z,_]\w{5,7}$/;
//定义正则表达式对象(汉字的范围是\u4e00-\u9fa5)4-6个汉字
var realnameReg = /^[\u4e00-\u9fa5]{4,6}$/;
//邮箱的验证规则
js中文正则表达式var emailReg = /^\w+@\w+(\.[a-z,A-Z]{2,3}){1,2}$/;
实际使⽤(利⽤表单控件的onBlur事件调⽤验证的⽅法)
真实姓名:
<input type="text" name="urealname" onblur="checkRealName()" />
<span id="errorRealname">2-4位汉字</span><br/>
function checkRealName() {
//定义正则表达式对象(汉字的范围是\u4e00-\u9fa5)
var realnameReg = /^[\u4e00-\u9fa5]{4,6}$/;
//获取密码对象
var realnameStr = isterForm.urealname.value;
//验证
st(realnameStr)) {
return true;
}
}
使⽤字符串的⽅法实现表单的验证
在javaScript中字符串的⽅法和JAVA中字符串的⽅法基本⼀致
Length 属性获取字符串的长度
CharAt() 获取指定位置的单个字符
indexOf() 判断某⼀个⼦字符串出现的位置
subString 从字符串中截取⼦字符串
利⽤字符串的⽅法实现密码的验证
（密码必须包含数字字母下划线，数字不能开头，必须6-8位）
请输⼊密码:
<input type="text" name="upass" onblur="checkPass()" />
<span id="errorPass">密码必须包含数字字母下划线，数字不能开头，必须6-8位</span><br/>
function checkPass(){
//密码必须包含数字字母下划线，数字不能开头，必须6-8位
var passstr = isterForm.upass.value;
//长度必须6-8为
if(!(passstr.length >=6 && passstr.length<=8))
{
return false;
}
//数字不能开头
if(passstr.charAt(0)>='0' && passstr.charAt(0)<='9')
{
return false;
}
//是否包含了⾮法字符
for(var i =0;i<passstr.length;i++){
var char_temp = passstr.charAt(i);
if(!(char_temp>='A' && char_temp<='Z' || char_temp=='_' ||passstr.charAt(i)>='0' && passstr.charAt(i)<='9' ||char_temp>='a' && char_temp<='z' )){
return false;
}
}
//验证是否包含所有的（数字，字母，下划线）
var count = 0;
var numReg = /\d/;
if (st(passstr)){
count++;
}
var charReg = /[a-z,A-Z]/;
st(passstr)){
count++;
}
var xiaReg = /[_]/;
st(passstr)){
count++;
}
if(count!=3){
return false;
}
return true;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论