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

要求：

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);//如果是数字，返回falseif(!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);//如果是数字，返回falseif(!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;}

JS表单验证，最详细步骤，代码相关推荐

分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
通用的JS表单验证插件代码
一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). [task] ...
JS表单验证(HTML+CSS+JS)详细教程
大家好,今天分享一个HTML+CSS+JS表单验证,这是我前两天学习的一个小demo,在这记录一下. 目录一.效果图二.介绍三.代码 (1)HTML (2)CSS (3)JavaScript J ...
掌财社:html5中AmazeUI框架中JS表单验证实战案例展示！
今天和大家分享个有关于"html5中AmazeUI框架中JS表单验证实战案例展示!"这方面的相关内容知识,让大家对于html5中AmazeUI框架也可以有所了解! 1.需求做一个 ...
js表单验证密码(确认密码)，密码长度至少8位，并且英文与数字组合
js表单验证密码(确认密码) 案例需求:在注册时,输入密码对其进行密码强度验证,并判断两次输入的密码是否一致.例如,密码长度至少8位,并且英文与数字组合. 代码实现 <p>输入密码:< ...
anjular.js表单验证实例
应用声明,控制器 <form action="" method="post" id="myForm" name="logFo ...
CSS骚操作之表单验证功能的实现代码
CSS骚操作之表单验证功能的实现代码效果图如下: 原理: 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号.邮箱.身份证-):valid伪类,可以匹配通过pattern验证的元 ...
JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1.长度限制 <p>1. 长度限制</p&g ...
js表单验证（常用的正则表达式）
js表单验证的正则表达式,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 语法:let reg=/正则表达式主体/修饰符(可 ...
JS表单验证(HTML+CSS+JS)小实例【详细教程】
前言大家好,分享一个HTML+CSS+JS表单校验,包括页面的简单布局,样式渲染,还有基础的JS校验方法.希望大家喜欢!哈哈一.效果图二.介绍图标库使用Element-UI <!-- 引 ...

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

目录

要求：

静态效果图：

HTML代码：

CSS代码：

JS代码：

JS表单验证，最详细步骤，代码相关推荐

最新文章

热门文章