前端验证:密码、用户名、手机号及姓名的正则表达式实现
在前端开发中,JavaScript验证是确保用户输入数据有效性和安全性的关键环节。本文将深入探讨如何使用JavaScript(JS)来实现密码、用户名、手机号码和用户姓名的有效性验证。首先,我们关注的是文本输入框的验证逻辑。 1. **密码验证**: 在`#UserId`元素上,开发者使用正则表达式`/^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9_\u4E00-\u9FA5]{8,20}$/`进行验证。这个正则表达式要求密码至少包含一个字母(大小写不限)、一个汉字,以及8到20个字符中的任意组合。当用户输入满足条件时,验证提示显示绿色星号(*ûʹ),表示输入有效;反之,红色星号(*ûϷ!)表示输入无效。 2. **用户名验证**: 对于`#Name`输入框,验证规则为`/^[a-zA-Z\u4e00-\u9fa5][a-zA-Z\u4E00-\u9FA5]{3,20}$/`,要求用户名至少包含一个字母(包括大小写)和一个汉字,且长度在3到20个字符之间。同样,绿色星号表示有效(*ûʹ),红色星号表示无效(*ûϷ!)。 3. **电子邮件地址验证**: 最后,`#Email`输入框使用更为复杂的正则表达式`/^([a-zA-Z0-9_\.\-])+\@@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/`。它检查输入是否符合标准电子邮件格式,包括字母、数字、下划线、点、减号,以及一个@符号,后跟域名部分,最后是两到四个字母或数字的顶级域名(如.com或.gov)。验证通过时,提示显示为绿色星号(*ʹ),失败时则为红色星号(*䲻Ϸ!)。 此外,文章还提到,当用户离开输入框(失去焦点)时,会额外检查字段是否为空,如果为空,则用红色星号(*û!)提示用户进行填写。 这些简单的前端验证功能有助于提升用户体验,减少无效数据提交,并帮助开发者构建更可靠的应用程序。通过结合正则表达式和键盘事件处理函数,开发者可以轻松地在用户输入过程中实时验证数据格式,从而确保数据的准确性和安全性。
var reg = /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9_\u4E00-\u9FA5]{8,20}$/;
if (reg.test($(this).val())) {
$("#validateUserId").css({ "color": "green" }).text("*用户名可以使用");
} else {
$("#validateUserId").css({ "color": "red" }).text("*用户名不合法!");
}
});
$("#UserId").blur(function () {
if (!$(this).val()) {
$("#validateUserId").css({ "color": "red" }).text("*请输入用户名!");
}
});
$("#Name").keydown(function () {
var reg = /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z\u4E00-\u9FA5]{3,20}$/;
if (reg.test($(this).val())) {
$("#validateName").css({ "color": "green" }).text("*用户姓名可以使用");
} else {
$("#validateName").css({ "color": "red" }).text("*用户姓名不合法!");
}
});
$("#Name").blur(function () {
if (!$(this).val()) {
$("#validateName").css({ "color": "red" }).text("*请输入用户姓名!");
}
});
$("#Email").keydown(function () {
var reg = /^([a-zA-Z0-9_\.\-])+\@@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (reg.test($(this).val())) {
$("#validateEmail").css({ "color": "green" }).text("*邮箱可以使用");
$("#validateEmail").css({ "color": "red" }).text("*邮箱不合法!");
}
});
$("#Email").blur(function () {
if (!$(this).val()) {
$("#validateEmail").css({ "color": "red" }).text("*请输入邮箱!");
}
});
$("#Telephone").keyup(function () {
var reg = /(^1[3,5,7,8]\d{9}$)|(^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
if (reg.test($(this).val())) {
$("#validateTelephone").css({ "color": "green" }).text("*电话可以使用");
} else {
$("#validateTelephone").css({ "color": "red" }).text("*电话不合法!");
}
});
$("#Telephone").blur(function () {
if (!$(this).val()) {
$("#validateTelephone").css({ "color": "red" }).text("*请输入您的电话!");
}
});
$("#Password").keyup(function () {
var regOne = /^.*?[\d]+.*$/;
var regTwo = /^.*?[A-Za-z]/;
var regThree = /^.*?[_@@#%~!$^&*()\-+|<>\.].*$/;
var regFour = /^.{8,20}$/;
var value = $(this).val();
if (regOne.test(value)
&& regTwo.test(value)
剩余7页未读,继续阅读
- 粉丝: 0
- 资源: 3
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- WebLogic集群配置与管理实战指南
- AIX5.3上安装Weblogic 9.2详细步骤
- 面向对象编程模拟试题详解与解析
- Flex+FMS2.0中文教程:开发流媒体应用的实践指南
- PID调节深入解析:从入门到精通
- 数字水印技术:保护版权的新防线
- 8位数码管显示24小时制数字电子钟程序设计
- Mhdd免费版详细使用教程:硬盘检测与坏道屏蔽
- 操作系统期末复习指南:进程、线程与系统调用详解
- Cognos8性能优化指南:软件参数与报表设计调优
- Cognos8开发入门:从Transformer到ReportStudio
- Cisco 6509交换机配置全面指南
- C#入门:XML基础教程与实例解析
- Matlab振动分析详解:从单自由度到6自由度模型
- Eclipse JDT中的ASTParser详解与核心类介绍
- Java程序员必备资源网站大全