JavaScript正则表达式实现注册信息校验功能
目录
- 注册信息校验
- 需求
- 案例分析
Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式的内容就返回true
| 正则表达式 | 匹配字符串 | Java中匹配结果 | JavaScript中匹配结果 |
|---|---|---|---|
| \d{3} | a123b | false | true |
| ^\d{3} | 123b | false | true |
| \d{3}$ | a123 | false | true |
| ^\d{3}$ | 123 | true | true |
注册信息校验
需求
- 在JS中使用正则表达式进行验证。
- 用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
- 密码： 大小写字母和数字6-20个字符
- 确认密码：两次密码要相同
- 电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
- 手机号：/^1[34578]\d{9}$/
- 生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
案例分析
- 创建正则表达式
- 得到文本框中输入的值
- 如果不匹配，在后面的span中显示错误信息，返回false
- 如果匹配，在后面的span中显示一个打勾图片，返回true
- 写一个验证表单中所有的项的方法，所有的方法都返回true，这个方法才返回true.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证注册页面</title>
<style type= "text/css">
body {
margin: 0;
padding: 0;
font‐size: 12px;
line‐height: 20px;
}
.main {
width: 525px;
margin‐left: auto;
margin‐right: auto;
}
.hr_1 {
font‐size: 14px;
font‐weight: bold;
color: #3275c3;
height: 35px;
border‐bottom‐width: 2px;
border‐bottom‐style: solid;
border‐bottom‐color: #3275c3;
vertical‐align: bottom;
padding‐left: 12px;
}
.left {
text‐align: right;
width: 80px;
height: 25px;
padding‐right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font‐weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
//验证表单中所有的项
function checkAll () {
//所有的方法都返回true，这个方法才返回true
return checkUser() && checkMail();
}
//验证用户名
function checkUser () {
//1. 创建正则表达式
var reg = /^[a‐zA‐Z][a‐zA‐Z0‐9]{3,15}$/;
//2. 得到文本框中输入的值
var value = document.getElementById("user").value;
//3. 如果不匹配，在后面的span中显示错误信息，返回false
if (reg.test(value)==false) {
document.getElementById("userInfo").innerHTML = "用户名不正确";
return false;
}
//4. 如果匹配，在后面的span中显示一个打勾图片，返回true
else {
document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
return true;
}
}
//验证邮箱
function checkMail () {
//1. 创建正则表达式
var reg = /^\w+@\w+(\.[a‐zA‐Z]{2,3}){1,2}$/;
//2. 得到文本框中输入的值
var value = document.getElementById("email").value;
//3. 如果不匹配，在后面的span中显示错误信息，返回false
if (reg.test(value)==false) {
document.getElementById("emailInfo").innerHTML = "邮箱格式不正确";
return false;
}
//4. 如果匹配，在后面的span中显示一个打勾图片，返回true
else {
document.getElementById("emailInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
return true;
}
}
</script>
</head>
<body>
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!‐‐ 长度为4～16个字符，并且以英文字母开头 ‐‐>
<td class="left">用户名：</td>
<td class="center">
<input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
<span style="color: red" id="userInfo"></span>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 输入长度大于6个字符 ‐‐>
<td class="left">密码：</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<!‐‐ 不能为空， 与密码相同 ‐‐>
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 邮箱格式要正确 ‐‐>
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in" onblur="checkMail()"/>
<span id="emailInfo" style="color: red;"></span>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 ‐‐>
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in"/>
</td>
</tr>
<tr>
<!‐‐ 不能为空， 要正确的日期格式 ‐‐>
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
到此这篇关于JavaScript正则表达式实现注册信息校验的文章就介绍到这了,更多相关js正则表达式注册信息校验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
js正则表达式校验指定字符串的方法
最新一个小表单验证需求:"只能输入汉字,并且必须包含"支行","分行","银行","信用社""字样,需用正则表达式校验 故写出了如下的表达式 var patt1=new RegExp(/^[\u0391-\uFFE5]*(([\u652f]{1}[\u884c]{1})|([\u5206]{1}[\u884c]{1})|([\u94f6]{1}[\u884c]{1})|([\u4fe1]{1}[\u7528
-
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
有时候正则表达式可以大大提高我们的开发效率呢 比如这段校验基本日期格式的javascript代码: let d1 = "2017/12/10"; let r1 = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; let r = d1.match(r1); if(r == null){ console.log("日期格式错误!"); }else{ console.log("通过~"); } 1.校验密码强度 密码的
-
javascript使用正则表达式实现注册登入校验
本文实例为大家分享了用正则表达式的方式实现注册登入的校验,供大家参考,具体内容如下 表单验证: 1.用户名:6–18位数字,字母,下划线_,文本域获取焦点和失去焦点出现提示文字. 2.登入密码:请输入6–20位数字,字母,任意字符,文本域获取焦点和失去焦点出现提示文字.(效果同上) 3.确认密码:内容与登入密码必须一致. 4.姓名:2-5位中文字. 5.身份证号:开头为1234568,中间16位为数字,结尾为数字或Xx. 6.邮箱:常规验证如下 7.手机号:为1开头是11位数字 8.提交是验证为
-
JavaScript正则表达式校验非零的正整数实例
话不多说,请看实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></titl
-
js输入框使用正则表达式校验输入内容的实例
js输入框输入校验 /*用户名称格式判断--用户名只能为下划线.数字.字母或中文长度不超过10个字符*/ function checkUserName(str) { var reg = /^[_0-9a-zA-Z\u4e00-\u9fa5]{1,10}$/; return reg.test(str); } 以上这篇js输入框使用正则表达式校验输入内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
JS正则表达式完美实现身份证校验功能
注意: 1.只针对18为身份证号码进行校验,现在15位的应该很少了, 2.不区分xX大小写, 3.出生年份1900-2099,每月的天数也进行相关验证(考虑的闰月的情况), 4.校验规则详见,这个写的比较详细和清楚,相信看过后都可以自己写一个, https://jingyan.baidu.com/article/7f41ececff944a593d095c8c.html 5.目前还无法对区位码就进行精确校验,本人搜集整理了区位码,提供了一个查询api,仅攻参考. 有不精确的地方可以留言指出 ap
-
Javascript校验密码复杂度的正则表达式
目前使用的正则表达式如下: 复制代码 代码如下: (?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30} 对应的验证规则是:密码中必须包含字母.数字.特称字符,至少8个字符,最多30个字符. 这个正则表达式在C#可以正常使用,但是在Javascript中却有问题. 请问是在js中如何写这样的正则表达式? 测试字符串:a123456- 解决方法如下所示: 把\d改为[0-9]问题就解决了,正则表达式如下: 复制代码 代码如下: var regex = new
-
JS 密码强度校验的正则表达式(简单且好用)
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type="text/
-
js正则表达式简单校验方法
对于字符串的一些操作,可以通过正则表达式来实现.一般的搜索操作想必大家已经学会,今天就来说说它的校验功能,这样可以帮助判断字符串类型或者是其它的组成,比如密码.中文.字符串的组成等.下面就js正则表达式的校验带来内容分享,同时要考虑在js中支持的类型. 1.常见js正则校验 (1)校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ (2)校验中文 字符串仅能是中文. ^
-
JavaScript正则表达式实现注册信息校验功能
目录 注册信息校验 需求 案例分析 Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配,只要字符串包含了正则表达式的内容就返回true 正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果 \d{3} a123b false true ^\d{3} 123b false true \d{3}$ a123 false true ^\d{3}$ 123 true true 注册信息校验 需求 在JS中使
-
javascript正则表达式模糊匹配IP地址功能示例
本文实例讲述了javascript正则表达式模糊匹配IP地址功能.分享给大家供大家参考,具体如下: function checkip() { var strIP = document.getElementById("accessip").value; var re = /^(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)$/g //模糊匹配IP地址的正则表达式 if(re.test(strIP)){ if(RegExp.$1
-
js实现注册页面校验功能
本文实例为大家分享了js实现注册页面的校验代码,供大家参考,具体内容如下 基本操作 document.getElementById():获取页面元素alert():向页面弹出提示框.innerHTML:操作页面某个元素的内容,可以获取,也可以赋值.document.write():向页面中写内容. 本案例实现注册表单的基本验证功能,主要实现非空验证.重复输入验证.邮箱验证(正则验证),通过alert提示对话框给予用户提示信息.并且当用户输入非法时阻止表单提交. 步骤分析: 第一步:绑定事件(on
-
通过正则表达式使用ajax检验注册信息功能
本期博客内容应该不算多,我们此次的目的是通过正则表达式并利用ajax可以实现动态交互的特点,检验注册的用户名以及密码是否合法. Entity层 该层主要包含一个用户类User,代码如下: package cn.cpx.springmvc.entity; import java.util.Date; /** * 用户实体类 * @author autumn_leaf * */ public class User { private int uId; private String uName; pr
-
JavaScript正则表达式校验与递归函数实际应用实例解析
JS递归函数(菲波那切数列) 实例解析: 一组数字:0 1 1 2 3 5 8 13 0 1 2 3 4 5 6 7 sl(0)=0; sl(1)=1; sl(2)=sl(0)+sl(1); sl(3)=sl(1)+sl(2); function sl(i){ if(i==0){ return 0; }else if(i==1){ return 1; }else{ return sl(i-1)+sl(i-2); } } 正则表达式检验 //校验是否全由数字组成 function isDigit(
-
Java使用正则表达式对注册页面进行验证功能实现
本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.regex.Matcher; import java.util.regex.Pattern; public class registered { public static void main(String[] args) { //注册用户 Scanner sc=new Scanner(System.in
-
JS+jQuery实现注册信息的验证功能
用JS和JQuery实现的效果是一样的. HTML代码 <legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="tex
-
Javascript 正则表达式校验数字的简单实例
实例如下: $("input[datatype=number]").blur(function () { var str = $(this).val(); if (!isDecimal(str)) { alert("请输入数字"); } }); function isDecimal(str) { if (isInteger(str)) return true; var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/; if (re.test(str
-
使用JavaScript进行表单校验功能
文本框校验 以下是文本框的校验步骤. 1.获取待校验的文本框value值, 2.对value值设置判定条件,使用if语句或switch语句实现. 3. 若满足条件,则校验通过,返回值为true. 4. 若不满足条件则返回值为false,替换文本输出校验的提示信息. 5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件. 6. 在input中调用校验函数,我使用的是onblur事件触发校验函数. 下拉框校验 下拉框的校验相比文本框略有不同,下拉框中option