用正则表达式简单验证

这是一篇简单的博客，希望对你有所帮助。
什么是正则表达式？正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。
正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户 名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外， 正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要 的特定部分(提取)等 。
其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。
正则表达式的特点

1. 灵活性、逻辑性和功能性非常的强。 2. 可以迅速地用极简单的方式达到字符串的复杂控制。 3. 对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.]\w+)@\w+([-.]\w+).\w+ ([-.]\w+)*$ 4. 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据 实际情况修改正则表达式. 比如用户名: /¹{3,16}$/
2. 这些在百度上也能查到，正则表达式的概念和特点先掌握，只要学会怎样利用就行，利用test()方法得到true或者false 然后赋值即可
3. 现在我们就用表格来表单验证
   4结构代码

注册新用户 我有账号，去登陆

            <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>
                        <label for="">短信验证码:</label>
                        <input type="text" class="inp" id="msg">
                        <span></span>
                    </li>
                    <li>
                        <label for="">登陆密码:</label>
                        <input type="text" class="inp" id="pwd">
                        <span>
                        </span>
                    </li>
                    <li class="safe">
                        安全程度
                        <em class="ruo">弱</em>
                        <em class="zhong">中</em>
                        <em class="qiang">强</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>
    
</div>
结果就是一个正常的表单验证结果，有点像交友网站的注册页面
接下来是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;
}

.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;
}

.ruo {
background-color: #de1111;
}

.zhong {
background-color: #40b83f;
}

.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;
}
以上的CSS代码和html代码都不重要 因为下面的正则表达式才是真正的大佬
接下来是js代码
window.onload = function () {
var reg = /^1[356789]\d{9}KaTeX parse error: Undefined control sequence: \d at position 23: …ar reg1=/^[1-9]\̲d̲{4,}/
var reg2=/²{2,8}KaTeX parse error: Undefined control sequence: \d at position 20: … var reg4 = /^\̲d̲{6}/
var reg5=/³{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 su=document.querySelector(’#surepwd’)
kai(pwd,reg5)
kai(msg,reg4)
kai(tel,reg)
kai(qq,reg1)
kai(nc,reg2)
function kai(can,re){
can.oninput = function () {
if (re.test(this.value)) {
this.nextElementSibling.className = ‘success’
this.nextElementSibling.innerHTML = ‘<i ">恭喜你输入正确’
} else {
this.nextElementSibling.className = ‘error’
this.nextElementSibling.innerHTML = ‘<i ">输入错误重新输入’
}
}
}
su.οninput=function(){
if(this.value==pwd.value){
this.nextElementSibling.className = ‘success’
this.nextElementSibling.innerHTML = ‘验证正确’
}else{
this.nextElementSibling.className = ‘error’
this.nextElementSibling.innerHTML = ‘验证错误’
}
}
}
先创建正则表达式
。

比如
var uname= /^1[356789]\d{9}KaTeX parse error: Expected group after '^' at position 52: …则表达式 //正则的书写格式 ^̲开始与结束
【】里面数据可以理解为选择一个 和 | 意思差不多
\d匹配数字0-9 {}里面的9是后面还有0到9的9个数字
效果图如下

最后还有个匹配违禁字符那个
是使用字符串方法为原理
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';

div.innerHTML = text.value.replace(/激情|gay/g, '’);
这句话的意思就是 div的文字内容为text的值里面激情 或者gay的全局匹配替换为
g后面还可以添加参数i 意思是可以不区分大小写
一起写就是全局匹配不区分大小写。
好，祝大家看了我的有所帮助，没有也没关系，正则很简单。

---

1. a-z0-9_- ↩︎

2. \u4e00-\u9fa5 ↩︎

3. a-zA-Z0-9_- ↩︎