使用JS实现表单验证

表单页面展示

FormCheck.jsp

<!DOCTYPE html>
< html lang="en"><head><meta charset="UTF-8"><title>注册页面表单校验</title><link rel="stylesheet" href="../css/register.css"></head><body><div class="reg_back"><div class="reg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="reg_center"><div class="reg_form"><form action="#" method="post" id="form"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" placeholder="请输入用户名(英文字符或数字)"id="username"><span id="s_username" class="error"></span></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" placeholder="请输入密码（长度在6~12位之间）"id="password"><span id="s_password" class="error"></span></td></tr><tr><td class="td_left"><label for="Email">Email</label></td><td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email"><span id="s_email" class="error"></span></td></tr><tr><td class="td_left"><label for="rename">姓名</label></td><td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名（中文姓名）" id="rename"><span id="s_rename" class="error"></span></td></tr><tr><td class="td_left"><label for="Telphone">手机号</label></td><td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"id="Telphone"><span id="s_telphone" class="error"></span></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="Birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="Birthday"></td></tr><tr><td class="td_left"><label for="checkcode">验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode"><img src="../image/10.png" id="img_check"></td><!--10.png为验证码图片--></tr><tr><td colspan="2" id="td_sub"><input type="submit" value="注册" id="btn_sub"></td></tr></table></form></div></div><div class="reg_right"><p>已有账号?<a href="#">立即登录</a></p></div></div><script src="../js2/FormCheck.js"></script></body>
</ html>

CSS样式

Register.css

* {margin: 0px;padding: 0px;box-sizing: border-box;
}body {background: url("../image/9.jpg") no-repeat center;/*设置图片适应整个页面*/background-size: 100% 100%;background-attachment:fixed;
}.reg_back {/*设置整体的尺寸、背景色、边距等*/width: 900px;height: 400px;border: 8px solid #eeeeee;background: white;margin: auto;margin-top: 20px;
}.reg_left {/*设置左浮动和外边距*/float: left;margin: 10px;
}.reg_left > p:first-child {/*设置段落（新用户注册）颜色和字体大小*/color: yellow;font-size: 20px;
}.reg_left > p:last-child {/*设置段落（USER REGISTER）颜色和字体大小*/color: #A6A6A6;font-size: 20px;
}.reg_center {/*设置中间的各种输入框等*/float: left;width: 500px;
}.reg_right {/*设置右边段落浮动和外间距*/float: right;margin: 30px;
}.reg_right > p:first-child {font-size: 15px;
}.reg_right p a {/*设置超链接（立即登录）颜色*/color: crimson;
}.td_left {/*设置表单中字体对齐方式和宽度、高度*/width: 100px;text-align: right;height: 40px;
}.td_right {/*设置输入框内边距*/padding-left: 40px;
}#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode{/*设置输入框大小和边框*/width: 220px;height: 30px;border: 1px solid #A4A4A4;/* 设置边框为圆角 */border-radius: 8px;padding-left: 10px;
}
#checkcode{/*验证码宽度*/width: 120px;
}
#img_check{/*验证码图片*/vertical-align: middle;height: 30px;width: 95px;
}
#btn_sub{/*注册按钮*/background: lime;width: 100px;height: 40px;border: 1px solid lime ;
}
.error{color:red;
}
#td_sub{padding-left: 150px;
}

JavaScript代码

FormCheck.js

window.onload = function () {//给表单绑定onsubmit事件document.getElementById("form").onsubmit = function () {return checkUsername() && checkPassword() &&checkEmail() && checkRename() && checkTelphone();}//给用户名和密码框、Email、姓名、手机号分别绑定离焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;document.getElementById("Email").onblur = checkEmail;document.getElementById("rename").onblur = checkRename;document.getElementById("Telphone").onblur = checkTelphone;
}//校验用户名
function checkUsername() {//获取用户名的值var username = document.getElementById("username").value;//定义正则表达式var reg_username = /^([a-zA-Z0-9_-])/;//判断值是否符合正则表达式的规则var flag = reg_username.test(username);//提示信息var s_username = document.getElementById("s_username");if (flag) {//提示绿色对勾s_username.innerHTML = "<img src='../image/gou.png' width='35' height='25'>";} else {//提示红色错误信息s_username.innerHTML = "用户名格式有误！";}return flag;
}//校验密码
function checkPassword(){//1.获取密码的值var password = document.getElementById("password").value;//2.定义正则表达式var reg_password = /^\w{6,12}$/;//3.判断值是否符合正则的规则var flag = reg_password.test(password);//4.提示信息var s_password = document.getElementById("s_password");if(flag){//提示绿色对勾s_password.innerHTML = "<img width='35' height='25' src='../image/gou.png'/>";}else{//提示红色错误信息s_password.innerHTML = "密码格式有误";}return flag;
}
//校验Email
function checkEmail(){//1.获取Email的值var email = document.getElementById("Email").value;//2.定义正则表达式var reg_email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;//3.判断值是否符合正则的规则var flag = reg_email.test(email);//4.提示信息var s_email = document.getElementById("s_email");if(flag){//提示绿色对勾s_email.innerHTML = "<img width='35' height='25' src='../image/gou.png'/>";}else{//提示红色错误信息s_email.innerHTML = "Email格式有误";}return flag;
}
//校验真实姓名
function checkRename(){//1.获取真实姓名的值var rename = document.getElementById("rename").value;//2.定义正则表达式var reg_rename = /^[\u4e00-\u9fa5]{2,4}$/;//3.判断值是否符合正则的规则var flag = reg_rename.test(rename);//4.提示信息var s_rename = document.getElementById("s_rename");if(flag){//提示绿色对勾s_rename.innerHTML = "<img width='35' height='25' src='../image/gou.png'/>";}else{//提示红色错误信息s_rename.innerHTML = "真实姓名输入有误";}return flag;
}
//校验手机号
function checkTelphone(){//1.获取手机号的值var telphone = document.getElementById("Telphone").value;//2.定义正则表达式var reg_telphone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;//3.判断值是否符合正则的规则var flag = reg_telphone.test(telphone);//4.提示信息var s_telphone = document.getElementById("s_telphone");if(flag){//提示绿色对勾s_telphone.innerHTML = "<img width='35' height='25' src='../image/gou.png'/>";}else{//提示红色错误信息s_telphone.innerHTML = "手机号输入有误";}return flag;
}

效果图展示

好了，我亲爱的读者朋友，以上就是本文的全部内容了！！！

觉得有点用记得给我点赞哦！

通过坚持不懈地学习，持续不断地输出，你的编程基本功算得上是突飞猛进。

为了帮助更多的程序员，专注于分享有趣的 Java 技术编程和有益的程序人生。一开始，阅读量寥寥无几，关注人数更是少得可怜。但随自己的不断努力，阅读量和关注人都在猛烈攀升。

绝对不容错过，期待与你的不期而遇。

使用JS实现表单验证相关推荐

js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
【卡法常用 ckl.js 库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度...
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...
JS通用表单验证函数
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素 ...
js——form表单验证
用js实现一个简易的表单验证效果: 代码: <html><head><title>js校验form表单</title><meta charset ...
js简单表单验证（弹出框）
登录和注册的弹出框的js验证有些字段是不能为空的,那么我们就要通过验证判断:用户是否填写. 此时就要用到js验证. 登录 html <form action="" meth ...
小程序基础开发（四）：weui-wxss组件表单页面，WxValidate.js组件表单验证上传
一,使用weui-wxss组件做一个表单页面 WeUI组件库简介这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小 ...
js实现表单验证-完整代码
一.页面展示二.全部代码页面代码 <body><div id="container"><div id=&quo ...
php中js验证表单,js实现表单验证
直接上代码/** * 验证表单内容 * required 必填项 * email 邮箱 * number 数字 * chinese 汉字 * idcode * phone 电话 * mobi ...
用css和js写表单验证,使用javascript及正则表达式实现表单验证(CSS，js练习)
标签: 注册界面 body{margin:0px;padding:0px;} .zc{ width:380px; height:600px; margin:0 auto; line-height:40 ...
js部分---表单验证；（含正则表达式）
1.非空验证 <div>用户名:<input id="yhm" type="text" name="yhm" />& ...

使用JS实现表单验证

目录

表单页面展示

FormCheck.jsp

CSS样式

Register.css

JavaScript代码

FormCheck.js

效果图展示

使用JS实现表单验证相关推荐

最新文章

热门文章