简简单单的正则表单验证练习

el09xccxy 发布于2019-08-20 18:59 / 1023人阅读

摘要：正则表单联系第一步，布局再练习之前，我上网查了一些网站的登陆注册页面，一般都是可以兼容手机端和端，所以我使用了进行布局，正好也再次练习一下的使用。

正则表单联系 第一步，布局

再练习之前，我上网查了一些网站的登陆注册页面，一般都是可以兼容手机端和pc端，所以我使用了bootstarp进行布局，正好也再次练习一下bootstarp的使用。
bootstarp中文网地址分享给大家
http://www.bootcss.com/

话不多说，直接上图：

第二步，书写表单验证js 首先，我们需要练习正则表达式

邮箱大家都知道，但是如何用正则来表示邮箱的格式呢？

我们大家都知道，邮箱必须有一个@符号，然后还有一个.,最后跟着一个域名，所以我们需要这样书写：

var emlReg = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/

然后需要书写名称以及密码

var nameReg = ^[u4e00-u9fa5]{2,}$

弱密码是6个以上的数字字母不包括汉字：

var pwReg1 = /^[0-9a-zA-Z]{6,}$/

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符和汉字，长度在6个以上)：

var pwReg2 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/

然后我们就需要书写js

var falg1 = falg2 = falg3 = false;

function sd(x,y,z){
    if(x.attr("id")=="btn3"){
        x.siblings(".sps").text("弱");
        if(reg5.test(x.val())){
            x.siblings(".sps").text("强");
        }
    }
}
function ab (x,y,z){
    if(y.test(x.val())){
        x.parent().removeClass("has-error")
        x.parent().addClass("has-success")
        sd(x,y,z)
        return true;    
    }else{
        x.parent().addClass("has-error")
        x.parent().removeClass("has-success")
        alert(z)
        return false;
    }
}
$("#btn1").blur(function(){
    var text = "邮箱格式错误"
    falg1=ab($(this),emlReg,text)
})
$("#btn2").blur(function(){
    var text = "用户名格式错误，请输入至少2个汉字"
    falg2=ab($(this),nameReg,text)
})
$("#btn3").blur(function(){
    var text = "密码格式错误，请输入至少6个英文或数字"
    falg3=ab($(this),pwReg1,text)
})

$("#zhuce").click(function(){
    $("#btn1").blur()
    $("#btn2").blur()
    $("#btn3").blur()
    if(falg1&&falg2&&falg3){
        alert("填写成功，正在提交，请稍后……")
    }
})

这样，一个简单的表单验证练习就完成了，喜欢的点个赞呗！

混合云专线服务正则练习器 php的正则验证 php的正则验证网址 js中验证日期的正则

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84991.html

正则表达式

摘要：本文内容共正则表达式火拼系列正则表达式回溯法原理学习正则表达式，是需要懂点儿匹配原理的。正则表达式迷你书问世了让帮你生成和解析参数字符串最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。 JS 的正则表达式正则表达式一种几乎可以在所有的程序设计语言里和所有的计算机平台上使用的文字处理工具。它可以用来查找特定的信息（搜索），也可以用来查...

bang590 2019-08-22 13:59 评论0 收藏0
使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（四）

摘要：使用搭建成熟可靠的后台系统四完善动态表单组件添加正则验证添加错误提示添加正则验证先来设置一些错误提示，以及添加正则验证上一章可能遗留了部分路径错误，可以自行调整邮箱格式不正确请选择这里是提供的一些正则使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（四）完善动态表单组件添加正则验证添加错误提示添加正则验证先来设置一些错误提示，以及添加正则验证（...

HtmlCssJs 2019-08-21 18:35 评论0 收藏0
原生js练习题---第六课

摘要：自定义多级右键菜单实现效果自定义多级右键菜单第五课第六题中已经通过事件实现了一级右键菜单，所以这题只要在上面再添加事件唤出子菜单即可。 0x1完美拖拽实现效果：6-01完美拖动这里没有使用h5的拖动，毕竟原题也是考察借助鼠标事件实现自定义的拖动，所以就借鉴了《js高级程序设计》里的自定义拖动自己封装了个拖动api，当然由于做这个系列题目使用的都是es5的语法，所以IE8往下就兼容不...

tinyq 2019-08-19 18:17 评论0 收藏0
JS正则表达式学习笔记1

摘要：正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。元字符一般情况下，正则表达式的一个字符对应字符串的一个字符。正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。正则表达式的学习确实不难，语法和应用也非常简单，能够快速入门，很轻松的就能写出简单的表达式来对字符串执行某些操作。网上也有标题党说一杯咖啡的时间就能学会。能学会吗？能！但要真...

wangdai 2019-08-26 10:12 评论0 收藏0
JS正则表达式学习笔记1

摘要：正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。元字符一般情况下，正则表达式的一个字符对应字符串的一个字符。正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。正则表达式的学习确实不难，语法和应用也非常简单，能够快速入门，很轻松的就能写出简单的表达式来对字符串执行某些操作。网上也有标题党说一杯咖啡的时间就能学会。能学会吗？能！但要真...

developerworks 2019-08-05 17:39 评论0 收藏0