使用正则表达式验证登录页面输入是否符合要求
时间:2019-04-01
本文章向大家介绍使用正则表达式验证登录页面输入是否符合要求,主要包括使用正则表达式验证登录页面输入是否符合要求使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先给大家展示下效果图:
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> $(function() { $("input[name='uname']").blur(function() { //失去焦点 var namestr = $(this).val(); var regstr = /^[\u4e00-\u9fa5]{2,4}$/; if(!regstr.test(namestr)) { $(this).parent().next().html("用户名必须是2-4个汉字").css("color", "red"); return false; } return true; }); $("input[name = 'uname']").focus(function() { //获取焦点 $(this).val(""); $(this).parent().next().html(""); }); $("input[name='pwd']").blur(function() { var pwdstr = $(this).val(); var regstr = /^\w{6}$/; if(!regstr.test(pwdstr)) { $(this).parent().next().html("密码必须是6位数字字母下划线").css("color", "red"); return false; } return true; }); $("input[name='pwd']").focus(function() { $(this).parent().next().html(""); }); $("input[name='birthday']").blur(function() { var birthdaystr = $(this).val(); var regstr = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(3[0-1]|2[0-9]|0?[1-9])$/; if(!regstr.test(birthdaystr)) { $(this).parent().next().html("日期格式不正确").css("color", "red"); return false; } return true; }); $("input[name='birthday']").focus(function() { $(this).parent().next().html(""); }); $("input[name='email']").blur(function(){ var emailstr = $(this).val(); var regstr = /^[\w\-]+@[a-z0-9A-Z]+(\.[a-zA-Z]{2,3}){1,2}$/; if(!regstr.test(emailstr)){ $(this).parent().next().html("邮箱格式不正确").css("color","red"); return false; } return true; }); $("input[name='email']").focus(function(){ $(this).parent().next().html(""); }); }); </script> <style> body { font-size: 12px; } #home { background-color: beige; border: solid 1px black; width: 550px; height: 185px; margin: auto; margin-top: 20px; } #head { height: 135px; } #foot { text-align: center; } .dl1 { clear: both; padding-left: 10px; } .dl1 dt { float: left; height: 30px; width: 80px; line-height: 30px; } .dl1 dd { float: left; height: 30px; line-height: 30px; /*width: 250px;*/ } #btn_res { background-image: url(img/reset.gif); width: 80px; height: 34px; } #btn_sub { background-image: url(img/submit.gif); width: 80px; height: 34px; } </style> <body> <div id="home"> <div id="head"> <form action="" method="post"> <dl class="dl1"> <dt>用户名 : </dt> <dd class="dd1"><input type="text" value="输入用户名" name="uname" /></dd> <dd></dd> </dl> <dl class="dl1"> <dt>用户密码 : </dt> <dd class="dd1"><input type="password" name="pwd" /></dd> <dd></dd> </dl> <dl class="dl1"> <dt>出生日期 : </dt> <dd class="dd1"><input type="text" name="birthday" /></dd> <dd>yyyy-mm-dd</dd> </dl> <dl class="dl1"> <dt>用户邮箱 : </dt> <dd><input type="text" name="email"/></dd> <dd></dd> </dl> </form> </div> <div id="foot"> <input type="submit" value="" id="btn_sub" /> <input type="reset" value="" id="btn_res" /> </div> </div> </body> </html>
总结
以上所述是小编给大家介绍的使用正则表达式验证登录页面输入是否符合要求,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 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 数组属性和方法
- Struts Scan工具的使用
- 树莓派基础实验24:超声波测距传感器实验
- 数据结构与算法系列2 线性表 链表的分类+使用java实现链表+链表源码详解
- 从spring boot 启动过程看apollo的初始化过程( 二)
- Apache IoTDB 系列教程-4:客户端接口
- 数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解
- Kali中密码暴力破解工具hydra的使用
- Apache IoTDB 系列教程-8:文件同步工具
- 树莓派基础实验25:DS18B20温度传感器实验
- 迈出加入 Apache IoTDB 社区的第一步!(订阅邮件、调试代码)
- kali下一些代理工具的简单描述
- 树莓派基础实验26:旋转编码器实验
- java web Session会话技术(原理图解+功能+与Cookie的区别+基本使用)
- JAVA创建对象有哪几种方式
- Apache IoTDB 系列教程-7:时序数据文件格式 TsFile