正则表达式表单验证

最新推荐文章于 2021-03-27 05:53:26 发布
最新推荐文章于 2021-03-27 05:53:26 发布
阅读量194 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sole_Memory1/article/details/100660978
版权

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="UTF-8">

<title>注册页面</title>

 

 

<!-- register css文件 -->

<link rel="stylesheet" href="css/register(1).css">

<script src="js/注册页表单验证.js"></script>

</head>

 

<body>

 

<!-- registerarea -->

<div class="registerarea">

<h3>

注册新用户

<em>

                    我有账号，去<a href="login.html" data-toggle="modal" data-target=".login">登陆</a>

                </em>

</h3>

<div class="reg_form">

 

<form action="demo.php">

<ul>

<li >

<label for="tel">手机号:</label>

<input type="text" class="inp" id="tel">

<span class="">     

                        

                        </span>

</li>

<li>

<label for="">QQ:</label>

<input type="text" class="inp" id="qq">

<span></span>

</li>

<li>

<label for="">昵称:</label>

<input type="text" class="inp" id="nc">

<span></span>

</li>

<li id="one-li">

<label for="">短信验证码:</label>

<input type="text" class="inp" id="msg">

<span></span>

<button id="btn">获取验证码</button>

</li>

<li>

<label for="">登陆密码:</label>

<input type="text" class="inp" id="pwd">

<span>

</span>

</li>

<li class="safe">

安全程度

<em >弱</em>

<em >中</em>

<em >强</em>

</li>

 

<li>

<label for="">确认密码:</label>

<input type="text" class="inp" id="surepwd">

<span></span>

</li>

<li class="agree">

 

<input type="checkbox">同意协议并注册

<a href="#">《知果果用户协议》</a>

</li>

<li>

<input type="submit" value="完成注册" class="over">

</li>

</ul>

</form>

 

</div>

</div>

</body>

 

</html>

 

 

 

<---JS文件--->

window.οnlοad= function(){

var regtel = /^1[3|4|5|7|8]\d{9}$/

var regqq = /^[1-9]\d{4,}$/; // 10000

var regnc = /^[\u4e00-\u9fa5]{2,8}$/;

var regmsg = /^\d{6}$/;

var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;

 

//密码弱

var regpwdR = /^[0-9]{6,16}$/;

//密码中

var regpwdZ = /^[a-zA-Z0-9]{6,16}$/;

//密码强

var regpwdQ = /^[a-zA-Z0-9_-]{6,16}$/;

 

var tel = document.querySelector('#tel');

var qq = document.querySelector('#qq');

var nc = document.querySelector('#nc');

var msg = document.querySelector('#msg');

var pwd = document.querySelector('#pwd');

var surepwd = document.querySelector('#surepwd');

var safe = document.querySelector('.safe')

 

regExp(qq,regqq);

regExp(nc,regnc);

regExp(msg,regmsg);

regExp(pwd,regpwd);


 

// 封装一个函数

function regExp(ele,reg){

ele.onblur = function(){

if ( this.value.trim() != ''){

if(reg.test(this.value)){

// alert(11);

this.nextElementSibling.className = 'success';

this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您格式输入正确';

} else {

// alert(22);

this.nextElementSibling.className = 'error';

this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确，请从新输入 ';

}

} else {

this.nextElementSibling.innerHTML = '';

}

}

}

 

regExp1(tel,regtel);

regExp1(pwd,regpwd);

//封装一个手机号和密码表单实时监控函数

function regExp1(ele1,reg1){

ele1.addEventListener("input",function(){

if ( this.value.trim() != ''){

if(reg1.test(this.value)){

// alert(11);

this.nextElementSibling.className = 'success';

this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您格式输入正确';

} else {

// alert(22);

this.nextElementSibling.className = 'error';

this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确，请从新输入 ';

}

} else {

this.nextElementSibling.innerHTML = '';

}

})

}

 

//密码框和确认密码框监控表单内容

pwd.addEventListener('input',function(){

if(this.value.trim() != ''){

if(regpwd.test(this.value)){

if(regpwdR.test(this.value)){

for ( var i = 0; i < this.parentNode.nextElementSibling.children.length; i ++){

this.parentNode.nextElementSibling.children[i].className = '';

this.parentNode.nextElementSibling.children[0].className = 'ruo';

}

// safe.children[0].className = "ruo";

} else if (regpwdZ.test(this.value)) {

for ( var i = 0; i < this.parentNode.nextElementSibling.children.length; i ++){

this.parentNode.nextElementSibling.children[i].className = '';

this.parentNode.nextElementSibling.children[1].className = 'zhong';

}

} else if (regpwdQ.test(this.value)) {

for ( var i = 0; i < this.parentNode.nextElementSibling.children.length; i ++){

this.parentNode.nextElementSibling.children[i].className = '';

this.parentNode.nextElementSibling.children[2].className = 'zhong';

}

}

}

} else if(pwd.value == ''){

surepwd.nextElementSibling.innerHTML = '';

for ( var i = 0; i < this.parentNode.nextElementSibling.children.length; i ++){

this.parentNode.nextElementSibling.children[i].className = '';

}

}

})


 

//确认密码框

surepwd.addEventListener("input",function(){

if( pwd.value.trim() != ''){

if(this.value.trim().length > 0){

// alert(33)

if(pwd.value === this.value){

this.nextElementSibling.className = 'success';

this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您格式输入正确';

} else {

// alert(22);

this.nextElementSibling.className = 'error';

this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 两次输入不一样，请从新输入 ';

}

} else {

// alert('请输入内容');

this.nextElementSibling.className = 'error';

this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 请输入内容 ';

}

} else {

this.nextElementSibling.innerHTML = '';

}

})


 

//获取验证码

var btn = document.querySelector('button');

var time = 10; // 定义剩下的秒数

btn.addEventListener('click', function() {

btn.disabled = true;

var timer = setInterval(function() {

if (time == 0) {

// 清除定时器和复原按钮

clearInterval(timer);

btn.disabled = false;

btn.innerHTML = '重新获取';

time = 3;

} else {

btn.innerHTML = '还剩下' + time + '秒';

time--;

}

}, 1000);

 

})

}

 

 

 

<-----CSS文件------>

.w {

width: 1200px;

margin: auto;

}

 

.header {

height: 82px;

border-bottom: 2px solid #b1191a;

}

 

.logo {

padding-top: 15px;

}

 

.registerarea {

height: 580px;

border: 1px solid #ccc;

margin-top: 20px;

}

 

.registerarea h3 {

height: 40px;

border-bottom: 1px solid #ccc;

background-color: #ececec;

padding: 0 10px;

font-weight: 400;

line-height: 40px;

font-size: 18px;

}

 

.registerarea h3 em {

float: right;

font-size: 14px;

}

 

.registerarea a {

color: #c81623;

}

 

.reg_form {

width: 600px;

height: 400px;

margin: 40px auto 0;

}

 

.reg_form li {

margin-bottom: 15px;

}

 

.reg_form label {

display: inline-block;

width: 100px;

height: 36px;

line-height: 36px;

text-align: right;

}

.reg_form .one-li {

position: relative;

}

.btn {

position: absolute !important ;

top: 100px !important;

left: 100px !important;

}

.inp {

width: 238px;

height: 34px;

border: 1px solid #ccc;

margin-left: 10px;

}

 

.error {

color: #df3033;

margin-left: 10px;

}

 

.error_icon,

.success_icon {

display: inline-block;

width: 20px;

height: 20px;

background: url(../img/error.png) no-repeat;

vertical-align: middle;

margin-top: -2px;

}

 

.success {

color: #40b83f;

margin-left: 10px;

}

 

.success_icon {

background-image: url(../img/success.png);

}

 

.safe {

padding-left: 187px;

color: #b2b2b2;

}

 

.safe em {

padding: 0 12px;

color: #fff;

background-color: #ccc;

}

 

.safe .ruo {

background-color: #de1111 ;

}

 

.safe .zhong {

background-color: #40b83f;

}

 

.safe .qiang {

background-color: #f79100;

}

 

.agree {

padding-top: 20px;

padding-left: 100px;

}

 

.agree input {

vertical-align: middle;

margin-right: 5px;

}

 

.agree a {

color: #1ba1e6;

}

 

.over {

width: 200px;

height: 34px;

background-color: #c81623;

margin: 30px 0 0 130px;

border: none;

color: #fff;

font-size: 14px;

}

 

.footer {

height: 120px;

text-align: center;

}

 

.links {

margin-top: 20px;

height: 30px;

}

 

.copyright {

line-height: 20px;

}

Sole Memory°
关注
PHP表单验证的正则表达式
qq_43405642的博客
02-11 542
<?php // 定义变量并默认设置为空值 $nameErr = $departmentErr = $timeErr = $bgtErr = $contact = ""; $name = $department = $time = $bgt = $contact = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty...
【PHP】PHP正则表达式验证表单
我不写博客谁写博客之自我提升
12-06 1026
以下内容转载自：https://www.jb51.net/article/93375.htm 模式匹配符： \：转义字符 例如：\b转义了b ^：正则表达式开始符号 $：正则表达式结束符号 *：匹配前面的字符出现0次或者n次 +：匹配前面的字符出现1次或者n次 ?：匹配前面的字符出现0次或者1次 .：匹配除了换行符以外的所有单个字符 |：或者的意思，例如x|y 匹配x或者y {n}：匹配前面的n个...
php表单正则表达式验证,表单验证和正则表达式
weixin_35632331的博客
03-21 487
摘要：第一部分：form表单基础表单验证使用onblur还是onchange.JavaScript中的正则表达式提示：在JavaScript代码中，函数需要传入的参数是一个对象时，在函数主体body中一定需要对这个参数进行判断是否为null。表单验证的作用：把输入的表单数据传入给JavaScript代码进行验证，可以让网络应用程序更加可靠，也能减少服务器的负担，同时减少客户端与服务器的带宽。for...
php 中正则的验证,PHP表单验证-正则表达式
weixin_30967451的博客
03-09 274
核心：preg_match (进行正则表达式匹配)验证名称：nameif(!preg_match("/^[a-zA-Z ]*$/",$name)){$nameErr="只允许字母和空格";}验证邮箱：emailif(!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)){$emailErr="非法邮箱格式";}验证 URL：websiteif(!...
JS 正则验证表单
memory_qian的专栏
07-25 495
<?php $user = array( 'name' => 'spark1985', 'email' => 'spark@imooc.com', 'mobile' => '13312345678' ); //进行一般性验证 if (empty($user)) { die('用户信息不能为空'); } if (strlen($user['name']) < 6) {
js正则表达式表单验证代码
06-24
综上所述，JavaScript正则表达式表单验证是网站开发中确保数据准确性和用户友好性的重要技术。通过掌握正则表达式的使用，开发者可以创建出功能强大且易于维护的表单验证系统。在实际应用中，结合具体业务需求，不断...
js正则表达式表单验证代码.zip
最新发布
11-24
本资源"js正则表达式表单验证代码.zip"提供了一套基于JavaScript的正则表达式实现的表单验证解决方案，涉及到CSS、HTML5、jQuery等相关技术。 JavaScript正则表达式是一种强大的文本处理工具，常用于验证用户输入，...
js正则表达式表单验证小案例
12-24
js正则表达式表单验证小案例
正则表达式之表单验证
litcangosh的博客
09-11 313
正则表达式：主要是用来匹配字符串的。 html部分 <div class="container" id="dv"> <!-- label标签的作用是点击QQ或者手机字的时候，光标自动到文本框里--> <label for="qq">Q Q</label><input type="text" id="qq">&lt...
php表单数据验证支持正则表达式和自定义错误返回
08-07
php表单数据验证，支持正则表达式和自定义错误返回
php正则表达式之用于表单验证的工具类开发
JiaoJy
08-09 577
新建一个php文件regex.php，开发类//成员属性 class regexTool { //先自定义一些验证类别 private $validate = array( 'require' => '/.+/', //检查非空 'mobile' => '/^1(3|4|5|7|8)\d{9}$/', 'ema
PHP笔记：正则表达式验证实例
weixin_42124234的博客
10-30 3743
文章目录简述验证电话号码验证Email地址验证IP地址 简述 正则表达式应用最多的场景是对表单提交的数据进行验证，判断是否合理，为了练习，此处用php语言实现服务器端的验证，但实际来说用js在网页客户端实现数据验证。 验证电话号码 此处验证座机号，座机号由11位（3位区位号-8位普通号码），或者12位（4位区位号-8位普通号码）号码组成。 <!DOCTYPE HTML> <htm...
PHP常用(正则)表单验证类
YBaog Blog
12-07 2065
这些天一直在整理项目,就把一些常用的总结了一下. 验证是否为指定长度的字母/数字组合 验证是否为指定长度数字 验证是否为指定长度汉字 验证身份证号码 验证手机号 验证邮件地址 验证邮编 验证URL地址
正则表达式和表单验证
fangyuwuzhu的博客
04-24 340
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0;padding: 0;font-family: &quot
用正则表达式简单验证
Infinityfeng的博客
06-17 1979
这是一篇简单的博客，希望对你有所帮助。 什么是正则表达式？正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户 名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外， 正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要 的特定部分(提取)等 。 其他语言也会使用正则表达式，本阶段我们主要是利
php 怎么用正则验证,php开发中经常用到的正则验证
weixin_39664998的博客
03-27 803
前言在PHP开发程序的过程中，经常会有很多表达要处理，而验证表单填写数据的合法性则是必须要考虑到的事，防治无效的数据对数据库造成影响。关于正则表达式的语法，网上有很多教程和手册，讲的也很详细，因为本人对正则的语法研究也不是很透彻，这里就从我实际开发中常用到的正则表达式说起，贴出代码附上简短的说明，大家可以参考，有什么不对的地方欢迎指正、交流。一些常用的正则表达式1.验证用户名preg_match(...
昵称 正则表达式_(四)正则表达式
weixin_39725403的博客
12-05 3119
1.概述存在形式：对象作用：对字符串进行复杂控制匹配：用户名表单只能输入英文和数字，昵称可以输入中文替换：敏感词汇替换成 *** 提取：淘宝搜索框输入“手机”，下方延展出“手机自营、手机壳、手机钢化膜……”2.使用创建正则表达式var 变量名 = new RegExp(/表达式/);var 变量名 = /表达式/;测试正则表达式变量名.test(str) 返回布尔值3.特殊字符边界符 开头^ 结...
JavaScript 正则表达式表单验证实践
在JavaScript中，正则表达式是进行表单验证的重要工具，它允许我们检查用户输入的数据是否符合预设的规则。正则表达式（Regular Expression）是一种特殊的字符串模式，用于匹配和处理文本。在表单验证中，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值