JS表单验证，最详细步骤，代码

暖橘短衫

2178人浏览 · 2022-08-11 20:59:23

暖橘短衫 · 2022-08-11 20:59:23 发布

要求：

        1.表单元素是为空
        2.用户名和密码符合要求（用户名包含a-z，0-9或下划线）
        3.email地址是否正确
        4.身份证是否是数字
        5.日期是否有效或日期格式是否正确

静态效果图：

HTML代码：

<div id="wrapper">
			<form action="#" method="GET">
				<label>名字:</label>
				<input type="text" id="uname">
				<span id="unameinfo"></span>
				<br>
				<label>姓氏:</label>
				<input type="text" id="xing">
				<span id="xinginfo"></span>
				<br>
				<label>登录名:</label>
				<input type="text" id="nickname" >
				<span id="nicknameinfo"></span>
				<br>
				<label>密码:</label>
				<input type="text" id="pwd">
				<span id="pwdinfo"></span>
				<br>
				<label>再次输入密码:</label>
				<input type="text" id="repwd">
				<span id="repwdinfo"></span>
				<br>
				<label>电子邮箱:</label>
				<input type="text" id="email">
				<span id="emailinfo"></span>
				<br>
				<label>性别:</label>
					<input type="radio" name="sex" id="nan"><i class="iconfont icon-nan"></i>男
					<input type="radio" name="sex" id="nv"><i class="iconfont icon-nv"></i>女
				<br>
				<label>头像:</label>
				<input type="file" value="选择头像" >
				<br>
				<label>爱好:</label>
				<input type="checkbox">运动
				<input type="checkbox">聊天
				<input type="checkbox">玩游戏
				<br>
				<label>出生日期:</label>
				<input type="text" id="year" style="width: 50px;">年
				<input type="number" id="month">月
				<input type="text" id="days" style="width: 50px;">日
				<span id="dateinfo"></span>
				<br>
				<div class="btn">
					<input type="submit" value="提交" class="sub">
					<input type="reset" value="重填" class="res">
				</div>
				
			</form>
		</div>

CSS代码：

*{
	padding: 0;
	margin: 0;
}
#wrapper{
	width: 600px;
	margin: 0 auto;
	padding: 30px 0px;
	border: 1px solid black;
	background-image:linear-gradient(#F6F0D3,#FFFFFF) ;
}
#wrapper form {
	margin-left: 80px;
}
#wrapper form label{
	display: inline-block;
	width: 100px;
	text-align: right;
}
#wrapper input{
	margin-bottom: 20px;
	margin-right: 5px;
}
#wrapper input[type="text"]{
	width: 150px;
	height: 18px;
}
#month{
	width: 50px;
}
#wrapper span{
	display: inline-block;
	color: red;
	font-size: 14px;
	margin-left: 15px;
}
.btn{
	display: flex;
	justify-content: left;
}
.sub,.res{
	width: 80px;
	height: 40px;
	border-radius: 5px;
	font-size: 18px;
	background-color: #FED2AD;
	border: none;
}
.sub{
	margin-left: 90px;
}
.iconfont{
	font-size: 24px;
}

JS代码：

//名字输入框和提示框
var _uname = document.querySelector("#uname");
var _unameinfo =document.querySelector("#unameinfo");
//姓氏输入框和提示框
var _xing = document.querySelector("#xing");
var _xinginfo =document.querySelector("#xinginfo");
//登录名输入框和提示框
var _nickname = document.querySelector("#nickname");
var _nicknameinfo = document.querySelector("#nicknameinfo");
//密码输入框和提示框
var _pwd = document.querySelector("#pwd");
var _pwdinfo =document.querySelector("#pwdinfo");
//再次密码输入框和提示框
var _repwd = document.querySelector("#repwd");
var _repwdinfo =document.querySelector("#repwdinfo");
//邮箱输入框和提示框
var _email = document.querySelector("#email");
var _emailinfo =document.querySelector("#emailinfo");
//年月日输入框和提示框
var _year = document.querySelector("#year");
var _month = document.querySelector("#month");
var _days = document.querySelector("#days");
var _dateinfo = document.querySelector("#dateinfo");
//正则表达式判断登录名
function isValid(str) { 
	return /^\w+$/.test(str); 
}
var _form = document.querySelector("form");
	_form.onsubmit =function(){
		if(!checkUname()){
			alert("请检查邮箱");
			return false;
		}
		if(!checkXing()){
			alert("请检查姓氏");
			return false;
		}
		if(!checkNickname()){
			alert("请检查登录名");
			return false;
		}
		if(!checkPwd()){
			alert("请检查密码");
			return false;
		}
		if(!checkRepwd()){
			alert("请检查密码");
			return false;
		}
		if(!checkEmail()){
			alert("请检查邮箱");
			return false;
		}
		if(!checkYear()){
			alert("请检查年份");
			return false;
		}
		if(!checkMonth()){
			alert("请检查月份");
			return false;
		}
		if(!checkDays()){
			alert("请检查日天");
			return false;
		}
		return true;
	}
	//名字验证
	_
	_uname.onblur = function(){
		checkUname();
	}
	function checkUname(){
		var isNumber=true;  //默认不含数字
		_unameinfo.innerHTML = "";
		var uname = _uname.value;
		if(uname == "" ||uname ==undefined){
			_unameinfo.innerHTML = "名字不能为空";
			return false;
		}
		for (var i = 0; i < uname.length; i++) {
			var cha=uname.charAt(i);
			//如果是数字，返回false
			if(!isNaN(cha)){
				isNumber=false;
				break;
			}
		}
		if(!isNumber){
			_unameinfo.innerHTML="名字不能含有数字";
			return false;
		}
		return true;
	}
	
	//姓氏验证
	_xing.onblur = function(){
		checkXing();
	}
	function checkXing(){
		var isnumber=true;  //默认不含数字
		_xinginfo.innerHTML = "";
		var xing = _xing.value;
		if(xing == "" || xing ==undefined){
			_xinginfo.innerHTML = "姓氏不能为空";
			return false;
		}
		for (var i = 0; i < xing.length; i++) {
			var ch=xing.charAt(i);
			//如果是数字，返回false
			if(!isNaN(ch)){
				isnumber=false;
				break;
			}
		}
		if(!isnumber){
			_xinginfo.innerHTML="姓氏不能含有数字";
			return false;
		}
		return true;
	}
	
	//登录名验证
	_nickname.onblur = function(){
		checkNickname();
	}
	function checkNickname(){
		_nicknameinfo.innerHTML = "";
		var nickname = _nickname.value;
		if(nickname=="" || nickname==undefined){
			_nicknameinfo.innerHTML = "输入不能为空";
			return false;
		}
		if(!isValid(nickname)){
			_nicknameinfo.innerHTML = "输入的字符只能是字母数字下划线";
			return false;
		}
		return true;
	}
	
	//密码验证
	var pwd;
	_pwd.onblur = function(){
		checkPwd();
	}
	function checkPwd(){
		_pwdinfo.innerHTML = "";
		pwd = _pwd.value;
		if(pwd==""|| pwd==undefined){
			_pwdinfo.innerHTML="密码不能为空";
			return false;
		}
		if(pwd.length<6){
			_pwdinfo.innerHTML = "密码不得小于六位";
			return false;
		}
		return true;
	}
	
	//再次密码验证
	_repwd.onblur= function(){
		checkRepwd();
	}
	function checkRepwd(){
		_repwdinfo.innerHTML="";
		var repwd=_repwd.value;
		if(repwd==""|| repwd==undefined){
			_repwdinfo.innerHTML="密码不能为空";
			return false;
		}
		if(repwd!=pwd){
			_repwdinfo.innerHTML="两次密码不一致";
			return false;
		}
		return true;
	}
	
	//电子邮箱验证
	_email.onblur = function(){
		checkEmail();
	}
	function checkEmail(){
		var email = _email.value;
		_emailinfo.innerHTML = "";
		if(email =="" || email==undefined){
			_emailinfo.innerHTML = "邮箱不能为空";
			return false;
		}
		if(!email.includes("@")){
			   _emailinfo.innerHTML="邮箱需要包含@";
			  return false;
		}
		if(!email.includes(".")){
			   _emailinfo.innerHTML="邮箱需要包含.";
			   return false;
		}
		if(email.indexof("@")>email.indexof(".")){
			_emailinfo.innerHTML="@必须在.前";
			return false;
		}
		return true;
	}
	
	//年份验证
	_year.onblur = function(){
		checkYear();
	}
	function checkYear(){
		_dateinfo.innerHTML = "";
		var year = _year.value;
		if(year =="" || year ==undefined){
			_dateinfo.innerHTML = "年份不能为空";
			return false;
		}
		return true;
	}
	
	//月份验证
	var month;
	_month.onblur = function(){
		checkMonth();
	}
	function checkMonth(){
		_dateinfo.innerHTML = "";
		month = _month.value;
		if(month =="" || month ==undefined){
			_dateinfo.innerHTML = "月份不能为空";
			return false;
		}
		if(month>12 || month<1){
			_dateinfo.innerHTML = "月份在1-12之间";
			return false;
		}
		return true;
	}
	
	//日验证
	var days
	_days.onblur = function(){
		checkDays();
	}
	function checkDays(){
		_dateinfo.innerHTML = "";
		days = _days.value;
		if(isNaN(days)){
			_dateinfo.innerHTML = "请输入准确的数值";
			return false;
		}
		if(days =="" || days ==undefined){
			_dateinfo.innerHTML = "日不能为空";
			return false;
		}
		if(days>31 || days<1){
			_dateinfo.innerHTML = "日在1-31之间";
			return false;
		}
		return true;
	}