简单的表单验证-注册表单

最新推荐文章于 2023-12-21 10:59:52 发布

牧码人

最新推荐文章于 2023-12-21 10:59:52 发布

阅读量498

点赞数

分类专栏： js jsp BootStrap 文章标签：表单验证 js函数

本文链接：https://blog.csdn.net/Java_Long_Asus/article/details/88062096

版权

jsp 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

BootStrap

3 篇文章 0 订阅

订阅专栏

记一个简单的表单验证Demo，以下简单列出代码示例：

1.页面内容

<head>
    <!-- 此处引入对应的css验证文件 -->
	<link rel="stylesheet" type="text/css" href="login.css"></link>
	<meta name="decorator" content="default" charset="UTF-8"/>
    <!-- 此处引入BootStrap的css样式表，用于设置页面样式 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 此处引入对应的js验证文件 -->
	<script type = "text/javascript" src = "login.js"></script>
</head>
<body>
	<form id="forms" onsubmit = "return register_check('click')" action="thisform">
		<div style="margin-top:100px;"></div>
		<div class="row">
			<div class = "col-xs-5" >用户名<span style="color:red">*</span>：</div>
			<div class = "col-xs-7" ><input id = "userName" name = "userName"><span></span>
			</div>
		</div><br/>
		<div class="row">
			<div class = "col-xs-5" >密码<span style="color:red">*</span>：</div>
			<div class = "col-xs-7" ><input id = "password" name = "password"><span></span>
			</div>
		</div><br/>
		<div class="row">
			<div class = "col-xs-5" >确认密码<span style="color:red">*</span>：</div>
			<div class = "col-xs-7" ><input id = "repassword" name = "repassword"><span></span>
			</div>
		</div><br/>
		<div class="row">
			<div class = "col-xs-5" >联系电话<span style="color:red">*</span>：</div>
			<div class = "col-xs-7" ><input id = "mobile" name = "mobile"><span></span>
			</div>
		</div><br/>
		<div class="row">
			<div class = "col-xs-5" >邮箱：</div>
			<div class = "col-xs-7" ><input id = "email" name = "email"><span></span>
			</div>
		</div><br/>
		<div class="row">
			<div class = "col-xs-5" ><input type="checkbox"/></div>
			<div class = "col-xs-7" ><label><a href = "http://www.baidu.com">我已阅读注册协议并同意注册。<a/></label>
			</div>
		<div class="row">
			<div class = "col-xs-12" style="text-align:center;">
				<input type="submit" value="我已确认，开始提交注册" class="btn btn-success">
				<span></span>
			</div>
		</div><br/>
	</form>
</body>

2.js验证文件

/**
	利用死循环获取表单每一个人输入框的紧邻下一个兄弟节点，即span标签
*/
function getSpan(object){
	while(true){
		if(object.nextSibling.nodeName != "SPAN"){
			object = object.nextSibling;
		}else{
			return object.nextSibling;
		}
	}
}
/**
	用于检测所填写的参数是否合法，并向页面添加提示信息
*/
function check(obj,title,fun,reg_click){
	var object = getSpan(obj);
	//当输入框获得焦点的时候出发提示信息
	obj.onfocus = function(){
		object.innerHTML = title;
		object.className="status_tips";
	}
	//当输入框失去焦点的时候对输入信息进行验证
	obj.onblur = function(){
		if(fun(this.value)){
			object.innerHTML = "Success";
			//设置验证通过对应span标签的样式
			object.className="status_success";
		}else{
			//设置当验证不通过的时候提示非法信息，并设置样式
			object.innerHTML = title;
			object.className="status_error";
		}
	}
	//当用户直接点击提交的时候，直接调用各个控件的验证方法再次验证
	if(reg_click == "click"){
		obj.onblur();
	}
}
//将验证函数直接赋值给onload事件，当文档加载完之后直接调用
onload = register_check;
//验证方法
function register_check(reg_click){
	//获取各个输入控件的输入参数
	var userName = document.getElementsByName("userName")[0];
	var password = document.getElementsByName("password")[0];
	var repassword = document.getElementsByName("repassword")[0];
	var mobile = document.getElementsByName("mobile")[0];
	var email = document.getElementsByName("email")[0];
	//默认验证成功
	var status = true;
	check(userName,"用户名由字母、数字、下划线组成，以字母开头，在6-20位之间",function(val){
		if(val.match(/^[a-zA-z]\w{6,20}$/)){
			return true;
		}else{
			//只要验证不成功，立即将验证标签status置为假，下同
			status = false;
			return false;
		}
	},reg_click);
	check(password,"密码在6-15位之间，由字母、数字、下划线组成",function(val){
		if(val.match(/^[a-zA-z0-9]\w{5,15}$/)){
			return true;
		}else{
			status = false;
			return false;
		}
	},reg_click);
	check(repassword,"确认密码必须和密码一致",function(val){
		if(val.match(/^[a-zA-z0-9]\w{5,15}$/) && val == password.value){
			return true;
		}else{
			status = false;
			return false;
		}
	},reg_click);
	check(mobile,"请输入正确的手机号码",function(val){
		if(val.match(/^1\d{10}$/)){
			return true;
		}else{
			status = false;
			return false;
		}
	},reg_click);
	check(email,"请输入正确的邮箱",function(val){
		if(val.match(/^\w+@\w+\.\w+$/)){
			return true;
		}else{
			status = false;
			return false;
		}
	},reg_click);
	//返回全局验证结果
	return status;
}

3.样式表文件

/*以下为各个状态的样式*/
.status_tips{
	color:#000;
}
.status_error{
	color:red;
}
.status_success{
	color:green;
}
/*设置lable的位置为右对齐*/
.col-xs-5{
	text-align:right;
}

通过以上设置，可以得到一个简易的表单验证模型。具体样式如下

牧码人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的表单验证-注册表单

记一个简单的表单验证Demo，以下简单列出代码示例：1.页面内容&lt;head&gt; &lt;!-- 此处引入对应的css验证文件 --&gt; &lt;link rel="stylesheet" type="text/css" href="login.css"&gt;&lt;/link&gt; &lt;meta name="decorato
复制链接

扫一扫

专栏目录