用正则表达式验证html表单输入

最新推荐文章于 2022-02-20 12:35:13 发布

罗密欧与猪一夜

最新推荐文章于 2022-02-20 12:35:13 发布

阅读量776

点赞数

文章标签： html 正则表达式

本文链接：https://blog.csdn.net/jerry_wzj_/article/details/107046494

版权

用正则表达式验证html表单输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            width: 500px;
            padding-left: 20px;
            margin-left: 40px;
            background-color: rgb(187, 238, 238);
        }
        span{
            font-size: small;
            color: rgb(108, 122, 122);
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <form name="myform"  onsubmit="return doSubmit()" method="post">
        <h3>个人信息提交表</h3>
        登录账号：<input type="text" name="uname" placeholder="请输入账户" /><span>6-18位有效字符(字母、数字、下划线)</span> <br/><br/>
        登录密码：<input name="password1" onblur="checkPassword1()" placeholder="请输入密码"><span>6-18位任意字符</span><br><br>
        重复密码：<input name="password2" onblur="checkPassword2()" placeholder="请再次输入密码"><span>重复密码与登陆密码一致</span><br><br>
        性&nbsp; &nbsp; &nbsp; &nbsp;别：<input type="radio" name="gender" value="male" checked> 男
        <input type="radio" name="gender" value="female">女<br><br>
        年&nbsp; &nbsp; &nbsp; &nbsp; 龄：<input type="number" name="age" placeholder="请输入年龄" onblur="checkAge()"><span>大于0的任意两位整数</span><br><br>
        手机号码：<input name="phone" placeholder="请输入手机号码" onblur="checkPhone()"><span>由1开头的11位整数</span><br><br>
        邮 &nbsp; &nbsp; &nbsp; &nbsp;箱：<input type="email" name="email" placeholder="请输入邮箱"><span>有效的Email地址</span><br><br>

        学&nbsp; &nbsp; &nbsp; &nbsp; 历：<select name="education" id="">
            <option value="">请选择</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
        </select>
        <br><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置"><br>
    </form>
</body>
<script>
    //验证账号函数
    function checkUname(){
        //获取账号信息
        var uname = document.myform.uname.value;
        //执行验证
        if (uname.match(/^\w{8,16}$/) == null) {
            alert("请输入8~16位的账号信息！");
            return false;
        }
        return true;
    }
    //验证密码函数
    function checkPassword1(){
        //获取密码信息
        var password1 = document.myform.password1.value;
        //执行验证
        if (password1.match(/^\S{8,16}$/) == null) {
            alert("请输入8~16位的密码信息！");
            return false;
        }
        return true;
    }
    function checkPassword2(){
        var password1 = document.myform.password1.value;
        var password2 = document.myform.password2.value;
        if(password1!=password2){
            alert("密码不一致");
            return false;
        }
        return true;
    }
    //验证年龄函数
    function checkAge(){
        var age=document.myform.age.value;
        if(age.match(/^[1-9]{2}$/)==null){
            alert("年龄必须是大于0的两位整数");
            return false;
        }
        return true;
    }
    //手机号验证
    function checkPhone(){
        var phone=document.myform.phone.value;
        if(phone.match(/^1+[0-9]{10}$/)==null){
            alert("手机号必须是由1开头的11位整数");
            return false;
        }
        return true;
    }
    //验证邮箱函数
    function checkEmail(){
        //获取账号信息
        var email = document.myform.email.value;
        //执行验证
        if(email.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
            alert("请输入正确的Email信息！");
            return false;
        }
        return true;
    }
    
    //表单提交
    function doSubmit(){
        return checkUname() && checkPassword1()&& checkPassword2() &&checkAge() &&checkPhone() && checkEmail();
    }
</script>
</body>
</html>

效果
在这里插入图片描述

罗密欧与猪一夜

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
用正则表达式验证html表单输入

用正则表达式验证html表单输入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> f
复制链接

扫一扫