前端常见的正则校验规则

<script>
    /**
     * 表单的校验
     *        1. 用户名：单词字符，8-20位长度
     *        2. 密码：  数字字符，    8-20位长度
     *        3. email:邮件格式
     *        4. 姓名：非空
     *        5. 手机号：手机号格式
     */
    //校验用户名
    //用户名：单词字符，8-20位长度
    function checkUserName() {
        //1.获取用户名值
        var username = $("#username").val();
        //2.定义正则
        var reg_username = /^\w{8,20}$/;
        //3.判断，给出提示信息
        var flag = reg_username.test(username);
        if (flag) {
            //用户名合法
            $("#username").css("border","");
        } else {
            //用户名非法,加红色的边框
            $("#username").css("border", "1px solid red");
        }
        return flag;
    }
    //校验密码
    function checkPassword() {
        var password = $("#password").val();
        var reg_password = /^\w{8,20}$/;
        var flag = reg_password.test(password);
        if (flag) {
            $("#password").css("border","");
        } else {
            $("#password").css("border", "1px solid red");
        }
        return flag;
    }
    //校验email
    function checkEmail(){
        //1.获取用户邮箱
        var email = $("#email").val();
        const reg_Email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
        var flag=reg_Email.test(email);
        if (flag) {
            //密码合法
            $("#email").css("border","");
        } else {
            //密码非法,加红色的边框
            console.log(flag);
            $("#email").css("border", "1px solid red");
        }
        return flag;
    }
    //校验电话号码
    function checkPhone(){
        var phone = $("#telephone").val();
        var reg_tele= /^[1][3,4,5,7,8][0-9]{9}$/;
        var flag=reg_tele.test(phone);
        if (flag) {
            $("#telephone").css("border","");
        } else {
            console.log(flag);
            $("#telephone").css("border", "1px solid red");
        }
        return flag;

    }
    //校验姓名
    function checkName(){
        var name = $("#name").val();
        var reg_name= /^\S{2,5}$/;
        var flag=reg_name.test(name);
        if (flag){
            $("#name").css("border","1px solid red");
        }else {
            $("#name").css("border","");
        }
    }
    //调用验证规则
    $(function () {
        //当表单提交时调用所有的校验方法
        $("#registerForm").submit(function () {
            //调用方法
            return checkUserName() && checkPassword() && checkEmail() && checkPhone() && checkName();
            //如果匿名的方法没有返回值，或者返回值为true时，则表单提交，如果返回false，则表单不提交
        })
        //当某一个组件失去焦点时，调用对应的校验方法
        //此处传递的是function对象，不要加括号
        $("#username").blur(checkUserName);
        $("#password").blur(checkPassword);
        $("#email").blur(checkEmail);
        $("#telephone").blur(checkPhone);
        $("#name").blur(checkName);
    })

</script>