利用js(javascript)进行动态的表单验证
程序员文章站
2022-03-08 18:45:15
...
1、本文章主要运用js的DOM(文档对象模型）编程。首先就是获取节点对象，然后设置各种事件句柄，在事件句柄对应的方法中，对节点对象的属性进行操作，以达到需要的效果。本文中关于正则表达式的内容可自行上网查询，后附链接（w3c教程）代码有点多，但是只要看懂一点点，那大体就很容易理解
2、主要效果如图所示：3、话不多说上代码：
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<body>
<script type="text/javascript">
//window.onload 意思是等页面完全加载才注册执行的的代码(也就是html加载完)
window.onload = function(){
//用于标记数据输入数据是否合法
var flag_username = false;
var flag_passwd1 = false;
var flag_passwd2 = false;
var flag_email = false;
//获得html节点对象(通过id获得)
var uesrname = document.getElementById('username');
var passwd1 = document.getElementById('passwd1');
var passwd2 = document.getElementById('passwd2');
var email = document.getElementById('email');
var button = document.getElementById('btn');
var span1 = document.getElementById("span1");
var span2 = document.getElementById("span2");
var span3 = document.getElementById("span3");
var span4 = document.getElementById("span4");
//按钮的单机事件操作
button.onclick = function(){
if(flag_email && flag_passwd1 && flag_passwd2 && flag_username) {
//一般提交与数据库进行比对
alert("注册成功");
}else{
alert("有数值不合法");
}
}
//用户名的失去焦点操作
uesrname.onblur = function(){
//利用正则表达式进行匹配
var reg = /^[0-9A-Za-z]{6,14}$/;
//进行匹配结果为true或false
if(reg.test(username.value)){
//设置节点中的属性
span1.style.color = 'aqua';
span1.style.font = "12px";
span1.innerText = '用户名合法';
flag_username = true;
}else{
span1.style.color = 'red';
span1.style.font = "12px";
span1.innerText = '用户名不合法(只能是字母或数字，长度位6~14)';
flag_username = false;
}
}
//再次获得焦点时，判断输入数据是否合法，不合法则清空，下边多出相似
username.onfocus = function(){
if(!flag_username){
username.value ="";
}
}
passwd1.onblur = function(){
if(passwd1.value != ""){
flag_passwd1 = true;
}else{
span2.style.color = 'red';
span2.style.font = "12px";
span2.innerText = '请输入密码';
flag_passwd1 = false;
}
}
passwd1.onfocus = function(){
span2.style.color = 'aqua';
span2.style.font = "12px";
span2.innerText = '';
}
passwd2.onblur = function(){
if(passwd1.value == "" || passwd2.value == ""){
span3.style.color = 'red';
span3.style.font = "12px";
span3.innerText = '请输入密码';
flag_passwd2 = false;
}else if(passwd1.value == passwd2.value){
span3.style.color = 'aqua';
span3.style.font = "12px";
span3.innerText = '密码一致';
flag_passwd2 = true;
}else{
span3.style.color = 'red';
span3.style.font = "12px";
span3.innerText = '密码不一致';
flag_passwd2 = false;
}
}
passwd2.onfocus = function(){
if(!flag_passwd2){
passwd2.value ="";
}
}
email.onblur = function(){
var reg = /^[a-zA-Z0-9_-][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(reg.test(email.value)){
span4.style.color = 'aqua';
span4.style.font = "12px";
span4.innerText = '邮箱合法';
flag_email = true;
}else{
span4.style.color = 'red';
span4.style.font = "12px";
span4.innerText = '邮箱不合法';
flag_email = false;
}
}
email.onfocus = function(){
if(!flag_email){
email.value ="";
}
}
}
</script>
<div>
<!-- 利用表格显示各种表单 -->
<table>
<tr>
<td width="100px">
用户名：
</td>
<td>
<input type="text" id="username" value="" />
</td>
<td>
<span id="span1"></span>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" id="passwd1" value="" />
</td>
<td>
<span id="span2"></span>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="text" id="passwd2" value="" />
</td>
<td>
<span id="span3"></span>
</td>
</tr>
<tr>
<td>
邮箱：
</td>
<td>
<input type="text" id="email" value="" />
</td>
<td>
<span id="span4"></span>
</td>
</tr>
<tr rowspan = "3">
<td>
<center>
<input type="button" id="btn" value="注册" />
</center>
</td>
</tr>
</table>
</div>
</body>
</html>
第一次写博客如有不妥之处，请谅解，另外，本人目前属于学习阶段，写的不好，请勿喷，谢谢
上一篇： 表单验证必填项
下一篇： PTA1009 说反话
推荐阅读
-
php用户注册页面利用js进行表单验证具体实例
-
ASP动态生成的javascript表单验证代码
-
JavaScript 使用正则表达式进行表单验证的示例代码
-
JavaScript：17-正则表达式、正则表达式概述、正则表达式在js中的使用、正则表达式中特殊字符、表单验证、正则替换replace
-
ASP动态生成的javascript表单验证代码
-
php用户注册页面利用js进行表单验证具体实例
-
ASP动态生成的javascript表单验证代码
-
利用js动态添加删除table行的示例代码_javascript技巧
-
在表单提交前进行验证的几种方式整理_javascript技巧
-
VUE:v-for循环出来的el-form，js如何进行总的表单验证