提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
提示：以下是本篇文章正文内容，下面案例可供参考
一、JS表单验证是什么？
表单验证是javascript中的高级选项之一。JavaScript 可用来在数du据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
一、JS表单验证需求分析？
表单验证需求
1、用户名不能为空
2、用户名必须在6-14位
3、用户名和密码由数字和字母组成（正则表达式）
4、密码和确认密码一致，邮箱地址合法
5、统一失去焦点验证
6、错误信息统一在span标签中显示，要求字体12号，红色，验证成功显示绿色字体
7、文本框获得焦点，清除错误信息，如果文本框中数据不合法，要求清空文本框的 value
8、最终表单所有项均合法方可提交
三、表单验证所需事件
1、所用到的三个事件：onfocus（焦点聚焦事件）、onblur（焦点离开事件）、onclick点击事件）。
2、利用事件触发函数，函数中执行校验的信息。
3、使用butten按钮提交事件
设置from表单及其文本框，代码如下（示例）：
<form id="userFrom" method="get">
用户名： <input type="text" id="username" name="username">
<span id="usernameError"></span>
<br>
密码： <input type="text" id="password" name="password">
<span id="passwordError"></span>
<br>
确认密码：<input type="text" id="confirmPwd" name="confirmPwd">
<span id="confirmPwdError"></span>
<br>
邮箱地址：<input type="text" id="email" name="email">
<span id="emailError"></span>
<br>
<input type="sbutten" value="提交信息" id="submitBtn">
<input type="reset" value="重置信息" id="resetBtn">
</form>
2.设置触发事件函数JS代码
JS表单验证代码（示例）：
<script type="text/javascript">
/*
表单验证需求
1、用户名不能为空
2、用户名必须在6-14位
3、用户名和密码由数字和字母组成（正则表达式）
4、密码和确认密码一致，邮箱地址合法
5、统一失去焦点验证
6、错误信息统一在span标签中显示，要求字体12号，红色
7、文本框获得焦点，清除错误信息，如果文本框中数据不合法，要求清空文本框的value
8、最终表单所有项均合法方可提交
*/
//网页加载完毕后可执行JS代码
window.onload=function () {
var retVal=true;
var usernameElt=document.getElementById("username");
var usernameErrorSpan=document.getElementById("usernameError");
//用户名正则表达式
var usernameRegExp = /^[a-zA-Z0-9_-]{4,16}$/;
//用户名验证开始
//用户名验证,失去焦点验证
usernameElt.onblur=function () {
//判断username的value值是否为空
//清除前后空白
var username = usernameElt.value.trim();
usernameElt.value = username;
var usernameRetVal = usernameRegExp.test(username);
//username不为空或全为空格开始验证
if (!(usernameElt.value=="")) {
if (!usernameRetVal) {
//此处测试正确
//获取用户名后文本对象
usernameErrorSpan.innerHTML = "<font color='red'>用户名不符合格式</font>";
} else {
//此处测试正确
usernameErrorSpan.innerHTML = "<font color='green'>用户名符合格式</font>";
}
}else {
usernameErrorSpan.innerHTML="<font color='red'>用户名不能为空</font>"
}
}
//获取焦点，清除span内容
usernameElt.onfocus=function () {
//如果username等于一个或多个空格
//清空非法value,使用index函数，结果等于-1，则不含有该字符串
if(!(usernameErrorSpan.innerText.indexOf("不")==-1)){
//如果usernameError不为空串,字符串中含有"不"清空value
usernameElt.value="";
}
//清空span内容
usernameErrorSpan.innerText="";
}
//密码验证，失去焦点验证
var passwordElt=document.getElementById("password");
var passwordErrorSpan=document.getElementById("passwordError")
var passwordRegExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/
//密码验证，失去焦点开始验证
passwordElt.onblur=function () {
//去除前后空白
var password=passwordElt.value.trim();
passwordElt.value=password;
//password不为空开始验证
if(!(passwordElt.value=="")){
//密码格式验证
var passwordRetVal=passwordRegExp.test(password);
if(passwordRetVal){
passwordErrorSpan.innerHTML="<font color='green'>密码格式正确</font>"
}else{
passwordErrorSpan.innerHTML="<font color='red'>密码格式不正确(数字和字母结合)</font>"
}
}else{
//密码不能为空
passwordErrorSpan.innerHTML="<font color='red'>密码不能为空</font>"
}
}
//密码获得焦点,密码获得焦点，重复密码span内容清空
passwordElt.onfocus=function () {
//清空非法value,使用index函数，结果等于-1，则不含有该字符串
if(!(passwordErrorSpan.innerText.indexOf("不")==-1)){
//如果passwordErrorSpan不为空串,字符串中含有"不"清空value
passwordElt.value="";
}
//清空span内容
passwordErrorSpan.innerText="";
}
//确认密码验证，失去焦点验证
var confirmPwdElt=document.getElementById("confirmPwd");
var confirmPwdErrorSpan=document.getElementById("confirmPwdError");
//密码验证，失去焦点开始验证
confirmPwdElt.onblur=function () {
//清除验证密码中的前后空白
var confirmPwd=confirmPwdElt.value.trim();
confirmPwdElt.value=confirmPwd;
//判断密码内容是否为空，不为空则开始验证
if(!(confirmPwdElt.value=="")){
//重复密码内容不为空，开始验证
//判断密码是否为空，不为空则开始验证
if(passwordElt.value==""){
confirmPwdErrorSpan.innerHTML="<font color='red'>密码不能为空</font>"
}else{
//判断密码和重复密码是否相等
if(passwordElt.value===confirmPwdElt.value){
//更改passwordErrorSpan中内容
confirmPwdErrorSpan.innerHTML="<font color='green'>重复密码验证成功</font>"
}else {
confirmPwdErrorSpan.innerHTML="<font color='red'>重复密码验证不成功</font>"
}
}
}else{
confirmPwdErrorSpan.innerHTML="<font color='red'>验证密码不能为空</font>"
}
}
//获取重复密码焦点时，清空span内数据，如果重复密码错误，则清空重复密码
confirmPwdElt.onfocus=function () {
//使用indexOf()方法判断span字符串中是否含有"失"字,结果等于-1，则不含有失字
if(!(confirmPwdErrorSpan.innerHTML.indexOf("失")==-1)){
//清空非法重复密码值
confirmPwdElt.value="";
}
//获取焦点时清除span内值
confirmPwdErrorSpan.innerText="";
}
//邮箱地址验证
var emailElt=document.getElementById("email");
var emailErrorSpan=document.getElementById("emailError")
var emailRegExp=/^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
//失去焦点时开始验证
emailElt.onblur=function () {
//去除邮箱地址前后空白
var email=emailElt.value.trim();
emailElt.value=email;
var emailRetVal=emailRegExp.test(email);
//邮箱地址不为空时开始验证
if(!(emailElt.value=="")){
//开始验证
if(emailRetVal){
emailErrorSpan.innerHTML="<font color='green'>邮箱地址格式验证成功</font>"
}else{
emailErrorSpan.innerHTML="<font color='red'>邮箱地址格式验证不成功</font>"
}
}else {
emailErrorSpan.innerHTML="<font color='red'>邮箱地址不能为空</font>"
}
}
//获得焦点时，邮箱格式不正确，则清空非法邮箱value值，并清除span内容
emailElt.onfocus=function () {
//indexOf方法结果为-1，则表示不含有该字符串
if(!(emailErrorSpan.innerText.indexOf("失")==-1)){
//清空非法value值
emailElt.value="";
}
//不管地址验证是否成功，在获取焦点后都要讲span中内容删除
emailErrorSpan.innerText="";
}
// 提交表单
//获取表单队形
var submitElt=document.getElementById("submitBtn");
//点击事件发生，进行表单信息提交验证
submitElt.onclick=function () {
if(usernameErrorSpan.innerText==""){
usernameElt.focus();
usernameElt.blur();
}
if(passwordErrorSpan.innerText==""){
passwordElt.focus();
passwordElt.blur();
}
if (confirmPwdElt.innerText==""){
confirmPwdElt.focus();
confirmPwdElt.blur();
}
if(emailElt.innerText==""){
emailElt.focus();
emailElt.blur();
}
//表单提交
var userFromElt=document.getElementById("userFrom");
if(usernameElt.innerText.indexOf("不")==-1||passwordElt.innerText.indexOf("不")==-1||confirmPwdElt.innerText.indexOf("不")==-1||emailElt.innerText.indexOf("不")==1){
userFromElt.action="http://localhost:8080/jd/save"
//提交表单
userFromElt.submit();
}
}
}
</script>
3.结果展示
该处使用的url网络请求的数据。
总结
JS代码验证总结：
1、利用触发事件实现对表单信息的验证，并使用butten按钮提交表单。
2、不适用submit提交按钮的原因：需要对四项验证内容进行验证，验证成功才能提交，submit按钮直接提交信息。
3、点击提交按钮信息后出现404错误，是因为表单IP地址有误，换一个可以使用的IP地址。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
