表单简单校验的两种实现
写在前面
- 本篇主要讲述如何实现简单的表单校验,通过 JavaScript 和 JQuery 两种方式来是实现。
- 主要通过 DOM 操作和触发事件以及简单的逻辑进行判断进而更好的实现。
1. JavaScript 实现表单校验
<1> 建立 form 表单
- 通过建立 form 表单确定 onsubmit 提交事件,绑定函数,进而实现相应的提交成功所应该满足的逻辑。
- 向 input 表单项确定唯一的 id,获取焦点事件 onfocus 、失去焦点事件 onblur 事件键盘按下释放事件 onkeyup 事件,当然获取焦点事件和失去焦点事件实现逻辑相同,只需绑定相同的逻辑即可绑定,并实现相关函数的逻辑。
- 每个 input 标签后跟随相应的 span 标签,到时通过 span 标签 id 获取元素,修改要给提示的内容。
<form action="https://blog.csdn.net/SolarL/article/details/89852420" onsubmit="return checkForm()">
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名不能少于6位')" onblur="checkUsername()"
onkeyup="checkUsername()"/><span id="span_username"></span><br/>
密码:<input type="password" id="password" onfocus="showTips('span_password','密码不能少于6位')" onblur="checkPassword()"
onkeyup="checkPassword()"/><span id="span_password"></span><br/>
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')"
onblur="checkRepassword()"
onkeyup="checkRepassword()"/><span id="span_repassword"></span><br/>
邮箱:<input type="email" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()"
onkeyup="checkMail()"/><span id="span_email"></span><br/>
手机号:<input type="number"/><br/>
<input type="submit" value="注册">
</form>
<2> 校验函数的实现
- 获取焦点
表单的获取焦点事件的实现逻辑基本是一样的,我们可以通过一个函数来实现,进而提高代码的复用性和简洁性,只需通过每个 span 标签的 id 获取到 span 标签,再通过 span.innerHTML 修改每个input 标签后 span 要给用户提示的·内容。
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanId, msg) {
var span = document.getElementById(spanId);
span.innerHTML = msg;
}
</script>
- 失去焦点事件和键盘输入释放事件
通过 document.getElementById(“每个表单输入项的id”).value 获取到用户输入的内容,再通过 document.getElementById("每个 span 标签的 id ") 来获取 span 后的元素,进而通过逻辑判断修改 span 标签的内容,通过用户输入的内容进行相应的提示。
当所有的校验函数返回结果均为 true 时,表单才能提交成功。
<script>
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername() {
var username = document.getElementById("username").value;
var span = document.getElementById("span_username");
if (username.length < 6) {
span.innerHTML = "<font color='red' size='2'>对不起,用户名太短不可用。</font>";
return false;
} else {
span.innerHTML = "<font color='green' size='2'>恭喜您,用户名可用!</font>";
return true;
}
}
/*
校验密码
*/
function checkPassword() {
var password = document.getElementById("password").value;
var span = document.getElementById("span_password");
if (password.length < 6) {
span.innerHTML = "<font color='red' size='2'>对不起,您输入密码长度太短。</font>";
return false;
} else {
span.innerHTML = "<font color='green' size='2'>恭喜您,密码可用!</font>";
return true;
}
}
function checkRepassword() {
var password = document.getElementById("password").value;
var rePassword = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
if (password != rePassword) {
span.innerHTML = "<font color='red' size='2'>对不起,两次密码输入不一致。</font>";
return false;
} else {
span.innerHTML = "<font color='green' size='2'>两次密码输入一致</font>";
return true;
}
}
/*校验邮箱
* */
function checkEmail(strEmail) {
var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if (emailReg.test(strEmail)) {
return true;
}
else {
return false;
}
}
function checkMail() {
var email = document.getElementById("email").value;
var span = document.getElementById("span_email");
var flag = checkEmail(email);
if (flag) {
span.innerHTML = "<font color='green' size='2'>恭喜您,邮箱可用!!!</font>";
return true;
} else {
span.innerHTML = "<font color='red' size='2'>对不起,邮箱输入有误。</font>";
return false;
}
}
/*是否提交成功*/
function checkForm() {
return checkUsername() && checkPassword() && checkRepassword() && checkMail();
}
</script>
<3> 完整代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript表单校验</title>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanId, msg) {
var span = document.getElementById(spanId);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername() {
var username = document.getElementById("username").value;
var span = document.getElementById("span_username");
if (username.length < 6) {
span.innerHTML = "<font color='red' size='2'>对不起,您输入的用户名太短。</font>";
return false;
} else {
span.innerHTML = "<font color='green' size='2'>恭喜您,用户名可用!</font>";
return true;
}
}
/*
校验密码
*/
function checkPassword() {
var password = document.getElementById("password").value;
var span = document.getElementById("span_password");
if (password.length < 6) {
span.innerHTML = "<font color='red' size='2'>对不起,您输入的密码长度太短。</font>";
return false;
} else {
span.innerHTML = "<font color='green' size='2'>恭喜您,密码可用!</font>";
return true;
}
}
function checkRepassword() {
var password = document.getElementById("password").value;
var rePassword = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
if (password != rePassword) {
span.innerHTML = "<font color='red' size='2'>对不起,两次密码输入不一致。</font>";
return false;
} else {
span.innerHTML = "<font color='green' size='2'>两次输入密码一致</font>";
return true;
}
}
/*校验邮箱
* */
function checkEmail(strEmail) {
var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if (emailReg.test(strEmail)) {
return true;
}
else {
return false;
}
}
function checkMail() {
var email = document.getElementById("email").value;
var span = document.getElementById("span_email");
var flag = checkEmail(email);
if (flag) {
span.innerHTML = "<font color='green' size='2'>恭喜您,邮箱可用!!!</font>";
return true;
} else {
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式输入有误。</font>";
return false;
}
}
/*是否提交成功*/
function checkForm() {
return checkUsername() && checkPassword() && checkRepassword() && checkMail();
}
</script>
</head>
<body>
<form action="https://blog.csdn.net/SolarL/article/details/90073743" onsubmit="return checkForm()">
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名不能少于6位')" onblur="checkUsername()"
onkeyup="checkUsername()"/><span id="span_username"></span><br/>
密码:<input type="password" id="password" onfocus="showTips('span_password','密码不能少于6位')" onblur="checkPassword()"
onkeyup="checkPassword()"/><span id="span_password"></span><br/>
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')"
onblur="checkRepassword()"
onkeyup="checkRepassword()"/><span id="span_repassword"></span><br/>
邮箱:<input type="email" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()"
onkeyup="checkMail()"/><span id="span_email"></span><br/>
手机号:<input type="number"/><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
2 . JQuery 实现表单校验
<1> 建立 form 表单
- 与之前不同的是,在表单中设置两个必填项,通过 class 类选择器定义两个必填项,之后方便绑定相同的事件以达到我们想要的相同效果,无需像之前在属性中设置过多 id 和事件及函数,使代码更加简洁。
<form action="https://blog.csdn.net/SolarL/article/details/89852420">
<div>
用户名:<input type="text" class="must" id="username"/>
</div>
<div>
密码:<input type="password" class="must" id="password"/>
</div>
<div>
手机号:<input type="tel"/>
</div>
<div>
<input type="submit" value="注册"/>
</div>
</form>
<2> 代码实现过程分析
- 首先,使用 JQuery 的方式实现必须先要导入 JQ 的文件,之后在文档加载事件里实现主要的逻辑代码。
- 其次,在文档加载事件里确定表单校验的事件,与之前一样,需要实现获取焦点事件、失去焦点事件、键盘输入抬起事件,此部分中我们将实现 JQ 方式的 DOM 操作和事件的链式编程,就如 Java 当中 StringBuffer 的 append 方法一样实现链式编程,JQ 中通过 triggerHandler 和 trigger 来触发当前要触发的事件,之后,要想知道用户当前输入的是哪一项就不同于之前的方式了,需要通过 $(this) 获取到当前输入项,再调用 is 方法中 id 来判断当前用户输入项 $(this).is("#表单中对应的id"),而这一项的输入值则需用 this.value 来获取。
$(".must").blur(function () {
//校验数据实现逻辑
}).focus(function () {
$(this).triggerHandler("blur");
}).keyup(function () {
$(this).triggerHandler("blur");
})
- 在 DOM 操作上,要使每个必填项的后面添加一个小红点,则最好的方式就是通过类选择器实现,在我们建立 form 表单的时候我们就在必填项用户名和密码处将其定义为同一类 class=“must” 便于操作,只需通过类选择器获取到输入项之后,通过 DOM 操作中的外部插入 after 在必填项 input 后面添加一个标签结点,值得注意的是,在这里无法通过内部插入 append 方法添加,使用 append 方法添加效果是添加到 input 标签里,我们看不到任何效果,在此基础上,我们要实现每个输入项的表单提示校验信息,同时还要满足我们所添加的必填项小红点的位置不改变,则需要我们特别注意,通过 $(this) 获取到当前输入项,要是直接在其后 append 添加结点就再次发生与之前添加小红点一样的错误,没有任何效果,当然,有人会说,那就用 after 实现外部插入,但是呢,当我们使用 after 实现外部插入就会发现还是那么不尽人意,小红点跑到了提示信息的后面,与此同时,我们用鼠标点击输入框获取焦点,键盘输入信息再次出发事件,移走鼠标第三次触发失去焦点事件,这样下来就校验了三次数据,达到了我们的校验逻辑,但是我们会发现之后会显示三条提示信息,显然不是我们想看到的,这时我们就换一种方式了,通过获取到当前输入项的父节点 div ,然后在其后 append 内部添加结点来实现小红点位置不变,再通过 $(".formtips").remove() 清空上一次提示信息,这样才达到我们想要的效果。
- 不使用$(".formtips").remove() 清空上一次提示信息效果图
- 使用 $(this).after() 外部插入效果图
- 使用 $(this).parent().append()内部插入效果图
- 绑定提交事件
当用户点击注册按钮时,需要 trigger 触发 获取焦点、失去焦点或键盘抬起事件中的一个来进行再一次的数据校验,防止用户在不输入任何信息的情况下直接点击注册,当错误信息为零时返回 true 表单提交成功。
<3> 完整代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery 表单校验</title>
<!--外部引入 css 样式-->
<link rel="stylesheet" href="../css/style.css"/>
<!--
1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
Jq的方式来实现:
1. 导入JQ的文件
2. 文档加载事件: 在必填项后面加一个小红点
3. 表单校验确定事件: blur focus keyup
4. 提交表单 submit
-->
<script src="../js/jquery-1.11.0.js" type="text/javascript"></script>
<script>
$(function () {
//动态在必填项后面添加小红点
$(".must").after("<font class='high'>*</font>");
//给必填项绑定事件
$(".must").blur(function () {
//获取用户当前输入的值
var value = this.value;
//清空上一次提示信息
//$(this).parent().find(".formtips").remove();
$(".formtips").remove();
//判断当前值是哪一项输入的值
//判断是否是用户名输入项
if ($(this).is("#username")) {
if (value.length < 6) {
$(this).parent().append("<span class='formtips onError'>用户名小于6位不可用</span>")
} else {
$(this).parent().append("<span class='formtips onSuccess'>用户名可用</span>")
}
}
//判断是否是密码输入项
if ($(this).is("#password")) {
if (value.length < 6) {
$(this).parent().append("<span class='formtips onError'>密码不低于6位</span>")
} else {
$(this).parent().append("<span class='formtips onSuccess'>密码可用</span>")
}
}
}).focus(function () {
$(this).triggerHandler("blur");
}).keyup(function () {
$(this).triggerHandler("blur");
})
//给表单提交绑定事件
$("form").submit(function () {
//触发所有必填项的校验
$(".must").trigger("focus");
if ($(".onError").length == 0) {
return true;
}
return false;
});
});
/* $(".must").blur(function () {
//校验数据实现逻辑
}).focus(function () {
$(this).triggerHandler("blur");
}).keyup(function () {
$(this).triggerHandler("blur");
})*/
</script>
</head>
<body>
<form action="https://blog.csdn.net/SolarL/article/details/90073743">
<div>
用户名:<input type="text" class="must" id="username"/>
</div>
<div>
密码:<input type="password" class="must" id="password"/>
</div>
<div>
手机号:<input type="tel"/>
</div>
<div>
<input type="submit" value="注册"/>
</div>
</form>
</body>
</html>
- 外部引入 css 样式
// style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
- 校验提示图标
结束语
小哥哥,小姐姐们,长得这么好看的你,觉得文章还不错就关注我吧,顺便给我点个赞鼓励一下吧,哈哈哈哈哈…