Web_JavaScript_JS客户端表单数据验证;_网站静态页面防纂改技术用javascript等客户端脚本对数据进行验证-CSDN博客

本文介绍了一个使用JavaScript进行客户端表单验证的方法。通过自定义函数实现了对表单项的非空检查、格式验证等功能，并展示了如何利用正则表达式来判断输入是否符合预期的格式。

实现：JavaScript客户端表单数据验证；

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
	<title>JS客户端表单数据验证_2WorkRoom3</title>
	<style> 
    	.error {color: #FF0000;}  
    </style>
	
	<script type="text/javascript">
		/**
		* JS客户端表单数据验证
		* 1、非空验证
		* 2、字符处理
		* 3、格式规则
		*/
		// 错误容器声明
		var xmErr,emailErr,websiteErr,genderErr;
		// 参数变量声明
		var xm,email,website,comment,gender;
		// 错误名称字串：有错则加名称，没有则剪掉；
		var errStr;
		window.onload = function() {
			// 错误容器初始化
			xmErr = document.getElementById("xmErr");
			emailErr = document.getElementById("emailErr");
			websiteErr = document.getElementById("websiteErr");
			genderErr = document.getElementById("genderErr");
			// 参数变量初始化
			xm = document.getElementsByName("xm")[0];
			email = document.getElementsByName("email")[0];
			website = document.getElementsByName("website")[0];
			comment = document.getElementsByName("comment")[0];
			gender = document.getElementsByName("gender");
			document.getElementById("subform").reset();
		}
		
		// 客户端验证函数
		function formSubFn() {
			errStr = "";	// 初始化或是还原；
		
			/// 非空验证、格式规则
			// 姓名
			if(!isEmpty(xm)) {
				// 格式验证：只能为字母空格；
				if(dataCheck("^[a-zA-Z ]*$", "i", xm.value)){
					setErrInfo(xmErr);
					delErrStr("xm");
				}else{
					setErrInfo(xmErr, "* 姓名只能为字母或者空号字符；");
					addErrStr("xm");
				}
			}else {
				setErrInfo(xmErr, "* 姓名不能为空；");
				addErrStr("xm");
			}
			
			// 电邮
			if(!isEmpty(email)) {
				if(dataCheck("([\\w\\-]+\@[\\w\\-]+\\.[\\w\\-]+)", "ig", email.value)){
					setErrInfo(emailErr);
					delErrStr("email");
				}else {
					setErrInfo(emailErr, "* 邮件地址格式不正确；");
					addErrStr("email");
				}
			}else {
				setErrInfo(emailErr, "* 邮件地址不能为空；");
				addErrStr("email");
			}
			
			// 性别
			if(isEmpty(gender[0]) && isEmpty(gender[1])){
				setErrInfo(genderErr, "* 性别不能为空；");
				addErrStr("gender");
			}else {
				setErrInfo(genderErr, "*");
				delErrStr("gender");
			}
			
			// 网址
			if(!isEmpty(website)){
				if(dataCheck("\\b(?:(?:https?|ftp):\\/\\/|www\\.)[-a-z0-9+&@#\\/%?=~_|!:,.;]*[-a-z0-9+&@#\\/%=~_|]", "i", website.value)){
					setErrInfo(websiteErr, "   ");
					delErrStr("website");
				}else {
					setErrInfo(websiteErr, "网址格式不正确；");
					addErrStr("website");
				}
			}
			
			
			var isok = false;
			if(errStr.length == 0){
				isok = true;	
			}
			console.log("->" + errStr);
			return isok;
		}
		
		/**
		* 格式验证
		* regExpStr，正则表达式字串；
		* attributes，正则表达式修饰符；
		* value，值；
		*/
		function dataCheck(regExpStr, attributes, value){
			var re = new RegExp(regExpStr, attributes);
			//console.log("->regExpStr_" + regExpStr + " value_" + value);
			return 	re.test(value);
		}
		
		/**
		* 空值检查
		*/
		function isEmpty(element) {
			if((typeof element) == "object"){
				if(element.getAttribute("type") == "text" || element.toString() == "[object HTMLTextAreaElement]"){
					// 文本框处理 或 文本区域
					var val = trim(element.value);
					if(val == ''){
						return true;
					}else {
						return false;
					}
					
				}else if(element.getAttribute("type") == "radio"){
					// 单选按钮处理
					return !element.checked;
				}
			}
		}	
		
		/**
		* 设置错误信息
		* element 错误容器
		* message 错误信息
		*/
		function setErrInfo(element, message){
			if((typeof element) == "object"){			
				element.innerHTML = (message == undefined || message == "") ? "*" : message;
			}
		}
		
		/**
		* 添加错误字串
		* elName 发生错误的元素名称；
		* errStr 错误字串标志；
		*/
		function addErrStr(elName){
			if(errStr.indexOf(elName+";") == -1){
				errStr = errStr + elName + ";";
			}
		}
		
		/**
		* 删除错误字串
		* elName 发生错误的元素名称；
		* errStr 错误字串标志；
		*/
		function delErrStr(elName){
			if(errStr.indexOf(elName+";") > -1){
				errStr = errStr.replace(elName+";", "");
			}
		}
		
		/**
		* 清除字串两端空格
		*/
		function trim(str){ //删除左右两端的空格
	　　    return str.replace(/(^\s*)|(\s*$)/g, "");
	　　}
	</script>
</head>

<body>
	<form id="subform" method="post" action="/jsDispose.php" onsubmit="return formSubFn();">
       姓名：<input type="text" name="xm">  
       <span class="error" id="xmErr">*</span>  
       <br><br>  
	   
       电邮：<input type="text" name="email">
       <span class="error" id="emailErr">*</span>  
       <br><br>  
	   
       网址：<input type="text" name="website">  
       <span class="error" id="websiteErr"></span>  
       <br><br>  
	   
       评论：<textarea name="comment" rows="5" cols="40"></textarea>  
       <br><br>  
	   
       性别：  
       <input type="radio" name="gender" value="female">女性
       <input type="radio" name="gender" value="male">男性
       <span class="error" id="genderErr">*</span>  
       <br><br>  
	   
       <input type="submit" name="submit" value="提交">   
    </form>
</body>
</html>

效果：