JS表单验证

JS运行在客户端的代码，通过在客户端对表单进行格式的验证可以避免大量不合法的数据提交到服务器，这样就可以减轻服务器端的压力。

表单的验证可以使用正则表达式进行验证

正则表达式对象的创建分为两种方法
1 . var regobj = /表达式内容/;
2. var regobj = new RegExp(“表达式内容”);

一般使用第一种方法创建

正则表达式的内容可以是简单的也可以是复合的
简单内容直接就是一个字符串: var regobj = /^xiaoli$/;

最简单的一个验证方法:

用户名:

注意的点:
一:获取表单上某一个空间的值存在两种方法: 1: document.getElementById()的方法获取，需要为控件指定一个ID值
通过document.表单名.控件名.value的方法获取，需要为form标签提供name属性，需要为控件提供name属性
二:如果进行表单验证，验证方法必须要返回一个boolean类型的结果
三:调用验证的验证的方法，是在form表单的onsubmit事件中调用，且调用的时候必须添加return

//用户名只能有数组字母下划线组成，长度4-6位function checkName(){//定义验证规则var namereg=/^\w{4,6}$/;//获取验证内容var namestr=document.regForm.txtName.value;//实现验证if(!namereg.test(namestr)){document.getElementById("namespan").innerHTML="用户名只能是数字字母下划线组成，长度4-6位";document.getElementById("namespan").className="info_error";return false;}document.getElementById("namespan").innerHTML="验证成功";document.getElementById("namespan").className="info_success";			 	return true;}//用户年龄必须是数字最多两位function checkAge(){//定义验证规则var agereg=/^\d{2}$/;//获取验证内容var agestr=document.regForm.txtAge.value;//实现验证if(!agereg.test(agestr)){document.getElementById("agespan").innerHTML="用户的年龄必须是两位数";document.getElementById("agespan").className="info_error";return false;}document.getElementById("agespan").innerHTML="验证成功";document.getElementById("agespan").className="info_success";			 	return true;}function checkForm(){if(checkName() && checkAge()){return true;}return false;}

用户名: 
用户年龄: 

表单的验证需要在表单的onSubmit 中添加方法,如果验证的方法返回为false则表单不提交，如果返回值为true 则表单提交

正则表达式的简单用法

		//只能出现字母,一次到多次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}$/;//邮箱的验证规则var emailReg = /^\w+@\w+(\.[a-z,A-Z]{2,3}){1,2}$/;

实际使用(利用表单控件的onBlur事件调用验证的方法)

真实姓名:

2-4位汉字

	function checkRealName() {//定义正则表达式对象(汉字的范围是\u4e00-\u9fa5)var realnameReg = /^[\u4e00-\u9fa5]{4,6}$/;//获取密码对象var realnameStr = document.registerForm.urealname.value;//验证if(realnameReg.test(realnameStr)) {document.getElementById("errorRealname").className = "span_success";document.getElementById("errorRealname").innerHTML = "成功";return true;}document.getElementById("errorRealname").className = "span_error";document.getElementById("errorRealname").innerHTML = "真实姓名必须4-6位汉字";return false;}

使用字符串的方法实现表单的验证

在javaScript中字符串的方法和JAVA中字符串的方法基本一致
Length 属性获取字符串的长度
CharAt() 获取指定位置的单个字符
indexOf() 判断某一个子字符串出现的位置
subString 从字符串中截取子字符串

利用字符串的方法实现密码的验证
（密码必须包含数字字母下划线，数字不能开头,必须6-8位）

请输入密码:

密码必须包含数字字母下划线，数字不能开头,必须6-8位
function checkPass(){//密码必须包含数字字母下划线，数字不能开头,必须6-8位var passstr = document.registerForm.upass.value;//长度必须6-8为if(!(passstr.length >=6 && passstr.length<=8)){document.getElementById("errorPass").innerHTML="长度必须6-8位";document.getElementById("errorPass").className="span_error";return false;}//数字不能开头if(passstr.charAt(0)>='0' && passstr.charAt(0)<='9'){document.getElementById("errorPass").innerHTML="数字不能开头";document.getElementById("errorPass").className="span_error";return false;}//是否包含了非法字符for(var i =0;i='A' && char_temp<='Z' || char_temp=='_' ||passstr.charAt(i)>='0' && passstr.charAt(i)<='9'||char_temp>='a' && char_temp<='z' )){document.getElementById("errorPass").innerHTML="不能包含非法字符";document.getElementById("errorPass").className="span_error";return false;}}//验证是否包含所有的（数字，字母，下划线）var count  = 0;var numReg = /\d/;if (numReg.test(passstr)){count++;}var charReg = /[a-z,A-Z]/;if(charReg.test(passstr)){count++;}var xiaReg = /[_]/;if(xiaReg.test(passstr)){count++;} if(count!=3){document.getElementById("errorPass").innerHTML="密码中必须包含三种字符";document.getElementById("errorPass").className="span_error";return false;}document.getElementById("errorPass").innerHTML="密码成功";document.getElementById("errorPass").className="span_success";return true;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！