最全前端正则验证登陆注册

最全前端正则验证登陆注册

提示：正则表达式验证注册信息

---

提示：写得菜，勿喷

---

前言

提示：阅读文章前你需要拥有简单的前端知识

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、选择图片后实现预览效果？

代码示例:

//html，form自己写
<div>
        <label>头像：</label>
        <div class="top">
           <img src="" class="top-img" id="top-img" style="display:none;"/>
           <input type="file" name="url" onchange="fileChange(this)"/>
        </div>
        <span id="urlLink"></span>
</div>
//jquery
//验证头像并预览头像
    var fileChange = function(e){
   
        var reader = new FileReader();// 读取文件
        reader.readAsDataURL(e.files[0]);
        reader.onload = function() {
      // 监听onload事件
            // console.log(reader.result);
            // 将读取的结果显示在页面中
            $("#top-img").attr("style","display:inline-block");
            $("#top-img").attr("src",reader.result);
        };
        if(validationRegExp.url.test(e.files[0].name)){
   
            $("#urlLink").html("ok");
            return true;
        } else{
   
            console.log("error");
            $("#urlLink").html("*照片格式出错");
            return false;
        }
    };

二、使用正则验证

1.书写正则验证

//正则验证
    var validationRegExp = {
   
        telephone: /^((13\d)|(14[57])|(15\d)|(17\d)|(18\d)|(19[98]))(\d)(\d{
   3})(\d{
   4})$/,//号码验证
        card: /^(\d{
   6})(((19)|(20))(\d{
   2}))((0[^0])|(1[12]))(([012]\d)|(3[01]))(\d{
   2})(\d)(\d|x)$/, //身份证验证
        eamil: /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/, 
        password