JS+jQuery实现注册信息的验证功能
时间:2019-04-07
本文章向大家介绍JS+jQuery实现注册信息的验证功能,主要包括JS+jQuery实现注册信息的验证功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
用JS和JQuery实现的效果是一样的。
HTML代码
<legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="text" name="userName" placeholder="由英文字母和数字组成的4-16位字符,以字母开头"> </td> </tr> <tr> <td>昵称:</td> <td><input type="text" name="nickName" placeholder="由2-6个汉字组成"> </td> </tr> <tr> <td>邮箱:</td> <td><input type="text" name="email" placeholder="邮箱账号@域名。如good@tom.com、whj@sina.com.cn"> </td> </tr> <tr> <td>密码:</td> <td><input type="password" name="pwd" placeholder="由英文字母和数字组成的4-10位字符"> </td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="pwd2" placeholder="确认密码"> </td> </tr> <tr> <td>手机号码:</td> <td><input type="text" name="phone" placeholder="手机号由11位数字组成,且以13,15,18开头"> </td> </tr> <tr> <td>出生日期:</td> <td><input type="text" name="date" placeholder="出生日期在1990-2009之间"> </tr> <tr> <td colspan="2" align="left"><input type="button" name="submit" value="提交"></td> </tr> </table> </form> </fieldset>
CSS样式
body { text-align: center; padding: 0; margin: 0; } fieldset { width: 800px; } table tr td ~ td { text-align: left; width: 600px; }
JS代码
//验证用户名 function check_userName() { var userName = document.getElementById("name").value; var regName = /[a-zA-Z]\w{4,16}/ if (userName == "" || userName.trim() == "") { document.getElementById("err_name").innerHTML = "请输入用户名"; return false; } else if (!regName.test(userName)) { document.getElementById("err_name").innerHTML = "由英文字母和数字组成的4-16位字符,以字母开头"; return false; } else { document.getElementById("err_name").innerHTML = "ok!!!"; return true; } } //验证昵称 function check_nickName() { var nickName = document.getElementById("nick").value; var regName = /[\u4e00-\u9fa5]{2,6}/ if (nickName == "" || nickName.trim() == "") { document.getElementById("err_nick").innerHTML = "请输入昵称"; return false; } else if (!regName.test(nickName)) { document.getElementById("err_nick").innerHTML = "由2-6个汉字组成"; return false; } else { document.getElementById("err_nick").innerHTML = "ok!!!"; return true; } } //验证邮箱 function check_email() { var email = document.getElementById("email").value; var regEmail = /^\w+@\w+((\.\w+)+)$/; if (email == "" || email.trim() == "") { document.getElementById("err_email").innerHTML = "请输入邮箱"; return false; } else if (!regEmail.test(email)) { document.getElementById("err_email").innerHTML = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn"; return false; } else { document.getElementById("err_email").innerHTML = "ok!!!"; return true; } } //验证密码 function check_pwd() { var pwd = document.getElementById("pwd").value; var regPwd = /^\w{4,10}$/; if (pwd == "" || pwd.trim() == "") { document.getElementById("err_pwd").innerHTML = "请输入密码"; return false; } else if (!regPwd.test(pwd)) { document.getElementById("err_pwd").innerHTML = "格式错误"; return false; } else { document.getElementById("err_pwd").innerHTML = "ok!!!"; return true; } } //确认密码 function check_pwd2() { var pwd = document.getElementById("pwd").value; var pwd2 = document.getElementById("pwd2").value; if (pwd2 == "" || pwd2.trim() == "") { document.getElementById("err_pwd2").innerHTML = "请输入密码"; return false; } else if (!pwd2.equals(pwd)) { document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致"; return false; } else { document.getElementById("err_pwd2").innerHTML = "ok!!!"; return true; } } //验证手机号 function check_phone() { var phone = document.getElementById("phone").value; var regPhone = /[13,15,18]\d{9}/; if (phone == "" || phone.trim() == "") { document.getElementById("err_phone").innerHTML = "请输入手机号"; return false; } else if (!regPhone.test(phone)) { document.getElementById("err_phone").innerHTML = "手机号由11位数字组成,且以13,15,18开头"; return false; } else { document.getElementById("err_phone").innerHTML = "ok!!!"; return true; } } //验证时间 function check_date() { var birthday = document.getElementById("birthday").value; var regDate = /[13,15,18]\d{9}/; if (birthday == "" || birthday.trim() == "") { document.getElementById("err_date").innerHTML = "请输入日期"; return false; } else if (!regDate.test(birthday)) { document.getElementById("err_date").innerHTML = "出生日期在1990-2009之间"; return false; } else { document.getElementById("err_date").innerHTML = "ok!!!"; return true; } }
Jquery代码
$(function () { var errMsg; $.each($("input"), function (i, val) { $(val).blur(function () { if ($(val).attr("name") == "userName") { $(".nameMsg").remove(); var userName = val.value; var regName = /[a-zA-Z]\w{4,16}/ if (userName == "" || userName.trim() == "") { errMsg = "<span class='nameMsg' style='color:red;'>用户名不能为空</span>"; } else if (!regName.test(userName)) { errMsg = "<span class='nameMsg' style='color:red;'>由英文字母和数字组成的4-16位字符,以字母开头</span>"; } else { errMsg = "<span class='nameMsg' style='color:red;'>OK!</span>"; } $(this).parent().append(errMsg); } else if ($(val).attr("name") == "nickName") { $(".nickMsg").remove(); var nickName = val.value; var regName = /[\u4e00-\u9fa5]{2,6}/ if (nickName == "" || nickName.trim() == "") { errMsg = "<span class='nickMsg' style='color:red;'>昵称不能为空</span>"; } else if (!regName.test(nickName)) { errMsg = "<span class='nickMsg' style='color:red;'>由2-6个汉字组成</span>"; } else { errMsg = "<span class='nickMsg' style='color:red;'>OK!</span>"; } $(this).parent().append(errMsg); } else if ($(val).attr("name") == "email") { $(".emailMsg").remove(); var email = val.value; var regEmail = /^\w+@\w+((\.\w+)+)$/; if (email == "" || email.trim() == "") { errMsg = "<span class='emailMsg' style='color:red;'>邮箱不能为空</span>"; } else if (!regEmail.test(email)) { errMsg = "<span class='emailMsg' style='color:red;'>邮箱账号@域名。如good@tom.com、whj@sina.com.cn</span>"; } else { errMsg = "<span class='emailMsg' style='color:red;'>OK!</span>"; } $(this).parent().append(errMsg); } else if ($(val).attr("name") == "pwd") { $(".pwdMsg").remove(); var pwd = val.value; var regPwd = /^\w{4,10}$/; if (pwd == "" || pwd.trim() == "") { errMsg = "<span class='pwdMsg' style='color:red;'>密码不能为空</span>"; } else if (!regPwd.test(pwd)) { errMsg = "<span class='pwdMsg' style='color:red;'>格式错误</span>"; } else { errMsg = "<span class='pwdMsg' style='color:red;'>OK!</span>"; } $(this).parent().append(errMsg); } else if ($(val).attr("name") == "pwd2") { $(".pwd2Msg").remove(); var pwd2 = val.value; var pwd = $("input")[3].value; if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals(pwd)) { errMsg = "<span class='pwd2Msg' style='color:red;'>两次输入密码不一致</span>"; } else { errMsg = "<span class='pwd2Msg' style='color:red;'>OK!</span>"; } $(this).parent().append(errMsg); } else if ($(val).attr("name") == "phone") { $(".phoneMsg").remove(); var phone = val.value; var regPhone = /[13,15,18]\d{9}/; if (phone == "" || phone.trim() == "") { errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 手机号不能为空 < /span>" } else if (!regPhone.test(phone)) { errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 格式错误 < /span>" } else { errMsg = "<span class = 'phoneMsg' style = 'color:red;' > OK! < /span>" } $(this).parent().append(errMsg); } else if ($(val).attr("name") == "date") { $(".dateMsg").remove(); var birthday = val.value; var regDate = /(199\d|200\d)[-/](0\d|1[0-2])[-/](0\d|[1-2]\d|30|31)/; if (birthday == "" || birthday.trim() == "") { errMsg = "<span class='dateMsg' style='color:red;'>请输入生日</span>"; } else if (!regDate.test(birthday)) { errMsg = "<span class='dateMsg' style='color:red;'>格式错误</span>"; } else { errMsg = "<span class='dateMsg' style='color:red;'>OK!</span>"; } $(this).parent().append(errMsg); } }); }); });
总结
以上所述是小编给大家介绍的JS+jQuery实现注册信息的验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 《Redis设计与实现》读书笔记(三十三) ——Redis排序命令sort的实现
- 高通HAL层之Sensor HAL
- Android Data Binding(数据绑定)用户指南
- Android 禁止Viewpager左右滑动功能
- 高通Audio中ASOC的machine驱动
- 《Redis设计与实现》读书笔记(三十五) ——Redis 二进制位数组及SWAR汉明重量算法
- Android TabWidget底部显示
- 《Redis设计与实现》读书笔记(三十六) ——Redis 慢查询日志实现
- 概率学中的随机变量与分布
- 神马?SQL竟然可以解脑筋急转弯的题目?
- android中一些特殊字符(如:←↑→↓等箭头符号)的Unicode码值
- 基于SpringBoot的任务管理平台v1.0正式发布
- 大数据系统的Lambda架构
- AKKA中的事件流
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- laravel5.6框架操作数据curd写法(查询构建器)实例分析
- PHP基于timestamp和nonce实现的防止重放攻击方案分析
- 怎么在 Linux 中查找一个命令或进程的执行时间
- laravel5.6 框架邮件队列database驱动简单demo示例
- php layui实现前端多图上传实例
- 解决Centos7下crontab+shell脚本定期自动删除文件问题
- PHP使用ajax的post方式下载excel文件简单示例
- laravel邮件发送的实现代码示例
- php curl发送请求实例方法
- ubuntn备份办法总结(四种)
- PHP中散列密码的安全性分析
- php的RSA加密解密算法原理与用法分析
- PHP实现微信提现(企业付款到零钱)
- centos7下rsync+crontab定期同步备份
- php抽象类和接口知识点整理总结