这是一篇简单的博客,希望对你有所帮助。
什么是正则表达式?正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象。
正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户 名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外, 正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要 的特定部分(提取)等 。
其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript 正则表达式完成表单验证。
正则表达式的特点
- 灵活性、逻辑性和功能性非常的强。 2. 可以迅速地用极简单的方式达到字符串的复杂控制。 3. 对于刚接触的人来说,比较晦涩难懂。比如:^\w+([-+.]\w+)@\w+([-.]\w+).\w+ ([-.]\w+)*$ 4. 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据 实际情况修改正则表达式. 比如用户名: /1{3,16}$/
- 这些在百度上也能查到,正则表达式的概念和特点先掌握,只要学会怎样利用就行,利用test()方法得到true或者false 然后赋值即可
- 现在我们就用表格来表单验证
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{2,8}KaTeX parse error: Undefined control sequence: \d at position 20: … var reg4 = /^\̲d̲{6}/
var reg5=/3{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 意思是可以不区分大小写
一起写就是全局匹配不区分大小写。
好,祝大家看了我的有所帮助,没有也没关系,正则很简单。