正则任务卡

最新推荐文章于 2025-03-13 16:17:25 发布

GY_java0819

最新推荐文章于 2025-03-13 16:17:25 发布

阅读量156

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/GY_java0819/article/details/109556798

版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

任务描述

做任务卡会遇到几个问题

文本框对齐通过标签的方式处理

 <style>
        label{
				/*居中对齐*/
				display: inline-block;
				width:80px;
				height: 40px;
				line-height: 40px;
				text-align: justify;
				text-align-last: justify;
        }
    </style>
    <form name="myform" onsubmit="return doSummit()" method="post">
        <label>登陆账号：</label><input type="text" name="uname" placeholder="请输入用户名" onblur="checkUname()"/>6~18位有效字符(字母、数字、下划线)<br/><br/>
        <label>登陆密码：</label><input type="password" name="upassword" placeholder="请输入密码" onblur="checkPassword()"/>6~18位任意字符<br/><br/>
     </form>

密码框的隐藏 type="password"将密码转换位暗文
警告弹窗的一直弹出关不掉

function checkUname(){
        //获取账号信息
        var uname = document.myform.uname.value;
        //执行验证
        if(uname.match(/^\w{8,16}$/) == null){
            alert("请输入8到16位的账号信息");
            return false;
            //添加一个判断，每一个都有一个焦点事件会一直判断，如果输入有误，出现弹框关不掉的情况。判断一下 如果输入为空的时候返回true
            if(uname == null){
                return true;
            }
        }
        return true;
    }

性别单选

<label>性别：</label><input type="radio" name="usex" value="1"/>男
             <input type="radio" name="usex" value="2"/>女 必须选择一个<br/><br/>

学历下拉框

 <label>学历：</label><select name="education" id="mySelect">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">大专</option>
            <option value="4" >本科</option>
            <option value="5">硕士</option>
            <option value="6">研究生</option>
            <option value="7">博士</option>
          </select>必须选择一个学历选项
          <br/><br/>

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>个人信息登记表</h1>    
    <style>
        label{
				/*居中对齐*/
				display: inline-block;
				width:80px;
				height: 40px;
				line-height: 40px;
				text-align: justify;
				text-align-last: justify;
        }
    </style>
    <!-- type="password"将密码转换位暗文-->
    <!--placeholder="*****"文本框内添加提示文字-->

    <form name="myform" onsubmit="return doSummit()" method="post">
        <label>登陆账号：</label><input type="text" name="uname" placeholder="请输入用户名" onblur="checkUname()"/>6~18位有效字符(字母、数字、下划线)<br/><br/>
        <label>登陆密码：</label><input type="password" name="upassword" placeholder="请输入密码" onblur="checkPassword()"/>6~18位任意字符<br/><br/>
        <label>重复密码：</label><input type="password" name="rupassword" placeholder="请确认密码"onblur="checkRpassword()"/>重复密码与登录密码<br/><br/>
        <label>性别：</label><input type="radio" name="usex" value="1"/>男
             <input type="radio" name="usex" value="2"/>女 必须选择一个<br/><br/>
        <label>年龄：</label><input type="text" name="uage" placeholder="请输入您的年龄" onblur="checkAge()"/>大于0的任意两位整<br/><br/>
        <label>手机号码：</label><input type="text" name="unumber" placeholder="请输入您的手机号码" onblur="checkNumber()"/>由1开头的11位整数<br/><br/>
        <label>邮箱：</label><input type="text" name="uemail" placeholder="请输入您的Email" onblur="checkEmail()"/>有效的Email地址<br/><br/>
        <label>学历：</label><select name="education" id="mySelect">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">大专</option>
            <option value="4" >本科</option>
            <option value="5">硕士</option>
            <option value="6">研究生</option>
            <option value="7">博士</option>
          </select>必须选择一个学历选项
          <br/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
<script>
    //验证登录账号
    function checkUname(){
        //获取账号信息
        var uname = document.myform.uname.value;
        //执行验证
        if(uname.match(/^\w{8,16}$/) == null){
            alert("请输入8到16位的账号信息");
            return false;
            //添加一个判断，每一个都有一个焦点事件会一直判断，如果输入有误，出现弹框关不掉的情况。判断一下 如果输入为空的时候返回true
            if(uname == null){
                return true;
            }
        }
        return true;
    }

    //验证登录账号密码
    function checkPassword(){
        //获取账号信息
        var upassword = document.myform.upassword.value;
        //执行验证
        if(upassword.match(/^\w{8,16}$/) == null){
            alert("请输入8到16位的密码");
            return false;
            if(upassword == null){
                return true;
            }
        }
        return true;
    }

    //重复验证登录账号密码
    function checkRpassword(){
        //获取账号信息
        var rupassword = document.myform.rupassword.value;
        //执行验证
        if(rupassword.match != upassword.match){
            alert("重复密码与登录密码");
            return false;
            if(rupassword == null){
                return true;
            }
        }
        return true;
    }

    //获取性别


    //验证登录账号手机号码
    function checkNumber(){
        //获取账号信息
        var unumber = document.myform.unumber.value;
        //执行验证
        if(unumber.match(/^1+[0-9]{10}/) == null){
            alert("请输入开头为1的11位手机号码");
            return false;
            if(unumber == null){
                return true;
            }
        }
        return true;
    }

    //验证登录账号邮箱
    function checkEmail(){
        //获取账号信息
        var uemail = document.myform.uemail.value;
        //执行验证
        if(uemail.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
            alert("请输入正确的Email信息！");
            return false;
            if(uemail == null){
                return true;
            }
        }
        return true;
    }

        //表单提交
        function doSubmit(){
        return checkUname() && checkPassword() && checkRpassword() && checkEmail() && checkNumber();
    }
</script>
</html>