脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 正则表达式 → 正则表达式认证界面

正则表达式初运用之认证界面的实现代码

 更新时间：2016年09月26日 10:31:10   作者：W川秋水  
这篇文章主要介绍了正则表达式初运用之认证界面的实现代码，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

先给大家展示下效果图：

关键代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<form action="" name="form1">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="input1" onblur="check1()"/></td><td><div id="div1" style="color:red"></div></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="input2" onblur="check2()"/></td><td><div id="div2" style="color:red"></div></td>
</tr>
<tr>
<td>再次输入密码</td>
<td><input type="password" name="input3" onblur="check3()"/></td><td><div id="div3" style="color:red"></div></td>
</tr>
<tr>
<td>请输入邮政编码</td>
<td><input type="text" name="input4" onblur="check4()"/></td><td><div id="div4" style="color:red"></div></td>
</tr>
<tr>
<td>输入手机号码</td>
<td><input type="text" name="input5" onblur="check5()"/></td><td><div id="div5" style="color:red"></div></div></td>
</tr>
<tr>
<td> 邮箱地址</td>
<td><input type="text" name="input6" onblur="check6()"/></td><td><div id="div6" style="color:red"></div></td>
</tr>
<tr>
<td>生日</td><td><input type="text" name="input7" onclick="check7()"/></td><td><div id="div7" style="color:red"></div></td>
</tr>
<tr><td><input type="submit" value="完成注册" onclick="sub()"></td></tr>
</table>
</form>
<script type="text/javascript">
var p = false;
function check1() {
var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
var div1=document.getElementById("div1");
if(!reg.test(document.form1.input1.value)){
div1.innerHTML="用户名必须是4-16字母或数字组成且以字母开始";
}else{
div1.innerHTML="√";
return true;
}
}
function check2() { 
var reg=/[a-zA-Z0-9]{4,10}/;
var div2=document.getElementById("div2");
if(!reg.test(document.form1.input2.value)){
div2.innerHTML="密码只能由英文字母和数字组成，长度为4-10个字符";
}else{
div2.innerHTML="√";
return true;
}
}
function check3() {
var div3=document.getElementById("div3");
if(document.form1.input3.value==0){
div3.innerHTML="请再次输入密码";
}else if(document.form1.input3.value!=document.form1.input2.value){
div3.innerHTML="密码不一致";
}else {
div3.innerHTML="√";
return true;
}
}
function check4() {
var reg=/^\d{6}$/;
var div4=document.getElementById("div4");
if(!reg.test(document.form1.input4.value)){
div4.innerHTML="邮政编码必须是6个数字";
}
else{
div4.innerHTML="√";
return true;
}
}
function check5() {
var reg=/^1\d{10}$/;
var div5=document.getElementById("div5");
if(!reg.test(document.form1.input5.value)){
div5.innerHTML="手机号必须是11个数字且1开始";
}else{
div5.innerHTML="√";
return true;
}
}
function check6() {
var reg=/^[a-zA-Z][a-zA-Z0-9_]+@([a-zA-Z0-9]+.)+(com|cn)$/;
var div6=document.getElementById("div6");
if(!reg.test(document.form1.input6.value)){
div6.innerHTML="邮箱地址不是这种格式";
}else{
div6.innerHTML="√";
return true;
}
}
function check7() {
var reg=/^(\d{4})-(\d{1,2})-(\d{1,2})$/;
var div7=document.getElementById("div7");
var arr=reg.exec(document.form1.input7.value);
if(arr==null){
div7.innerHTML="生日格式为1980-05-12或1988-05-04的形式";
}else if (arr[1]<1900||arr[1]>2016) {
div7.innerHTML="生日必须在1900-2014";
}else if (arr[2]<1||arr[2]>12) {
div7.innerHTML="生日的月份在01~12之间";
}else if (arr[3]<1||arr[3]>31) {
div7.innerHTML="生日的日期必须在01-31之间";
}else {
div7.innerHTML="√";
p = true;
}
}
function sub(){
if(check1()==true&&p==true&& check2()==true&&check3()==true&&check4()==true&&check5()==true&&check6()==true){
alert("注册成功");
}else{
alert("注册失败，你还有信息没填或不符合格式");
}
}
</script>
</body>
</html>

以上所述是小编给大家介绍的正则表达式初运用之认证界面的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 浏览器中的正则表达式陷阱说明

    浏览器中的正则表达式陷阱说明

    js 内置对象 RegExp 我们用的很习惯 也很舒服 但是里面却有 严重的隐患 或者陷阱...原因在于 有些浏览器 对正则表达式直接量的优化.
    2010-05-05
  • javascript正则表达式学习之位置匹配

    javascript正则表达式学习之位置匹配

    正则表达式是匹配模式，要么是匹配字符，要么匹配位置。在开发中用到位置匹配的机会很少，但是小编也给大家介绍下关于正则表达式位置匹配的相关知识，感兴趣的朋友跟随小编一起看看吧
    2019-04-04
  • 正则基础之 捕获组(capture group)

    正则基础之 捕获组(capture group)

    捕获组就是把正则表达式中子表达式匹配的内容，保存到内存中以数字编号或显式命名的组里，方便后面引用,这里就为大家简单介绍一下
    2023-05-05
  • javascript中使用正则表达式进行字符串验证示例

    javascript中使用正则表达式进行字符串验证示例

    我写的一个表达式验证示例：功能如下：用户名，不能为空;密码6为数字;密码确认，两次输入密码必须相同;身份证号码必须是15位，或者是18位，最末尾也可以是X
    2013-05-05
  • 正则表达式实现匹配连续数字的方法

    正则表达式实现匹配连续数字的方法

    我这两天刚刚学正则表达式。我觉的正则对连续的字符匹配很简单，但是对连续的一段数字匹配就不是很好。正好最近有朋友问了匹配连续数字的正则，就帮忙写了一下，算是当作温习一下吧。下面这篇文章就主要介绍了正则表达式实现匹配连续数字的方法。
    2017-01-01
  • Scala中正则表达式以及与模式匹配结合(多种方式)

    Scala中正则表达式以及与模式匹配结合(多种方式)

    这篇文章主要介绍了Scala中正则表达式以及与模式匹配结合,本文给大家介绍了多种模式匹配方式，需要的朋友可以参考下
    2019-06-06
  • 精通JS正则表达式(推荐)

    精通JS正则表达式(推荐)

    精通JS正则表达式，讲的比较详细，学习正则表达式的朋友可以参考下。
    2010-11-11
  • Linux行处理工具之grep 正则表达式详解

    Linux行处理工具之grep 正则表达式详解

    grep表达式有三种不同的版本，分别为basic(BRE) 、extended（ERE） 以及 perl PCRE，这篇文章主要介绍了Linux行处理工具之grep 正则表达式详解,需要的朋友可以参考下
    2022-08-08
  • 正则表达式（简单易懂篇）

    正则表达式（简单易懂篇）

    正则表达式是一种可以用于模式匹配和替换的强大工具。这篇文章主要介绍了正则表达式（简单易懂篇），需要的朋友参考下
    2017-01-01
  • 正则表达式验证IPV4地址功能实例分析

    正则表达式验证IPV4地址功能实例分析

    这篇文章主要介绍了正则表达式验证IPV4地址功能,结合实例形式分析了IPV4地址验证的原理及具体实现技巧,需要的朋友可以参考下
    2017-01-01

最新评论