js中用户注册界面验证（31）

最新推荐文章于 2024-05-25 06:54:58 发布

㼛思雨

最新推荐文章于 2024-05-25 06:54:58 发布

阅读量1.9k

点赞数 5

分类专栏： Javascript 文章标签： javascript

原文链接：https://blog.csdn.net/opooc/article/details/80202267

版权

Javascript 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

JavaScript校验要求：
1.每一项都必须填写内容或者做出选择，不能存在空项；
2.用户名：只能包含英文字母和下划线，长度为6-18个字符；
3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符；
4.确认密码：必须与密码相同；
5.联系电话：确保手机号码的有效性；
6.电子邮箱：确保电子邮箱的有效性；
7.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。

<html>
<head>
    <meta charset="UTF-8">
    <title>新用户注册</title>
</head>
<style>
    form{
        width: 700px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid black;
    }
    div{
        padding: 5px 0;
    }
    label{
        display: inline-block;
        width: 100px;
        margin-right: 40px;
        text-align: right;
    }
    span{
        color: #FF0000;
        font-size:12px
    }
    .inputText{
        display: inline-block;
        width: 260px;
        margin-right: 20px;
    }
</style>
<!--
    JavaScript校验要求：
    1.每一项都必须填写内容或者做出选择，不能存在空项；+++++++++


    2.用户名：只能包含英文字母和下划线，长度为6-18个字符；++++++++


    3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符；++++++
    4.确认密码：必须与密码相同；


    5.联系电话：确保手机号码的有效性；+++++++++
    6.电子邮箱：确保电子邮箱的有效性；+++++++++

    7.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。++++++
-->
<script>
//    用户名
    function YHMonblus(){
        var username=document.getElementById("username");
       // var reN =/^\d{6,18}$/;
        var re = /^[a-zA-Z_]{6,18}$/;
        if(username.value==""){
            document.getElementById('YHMerror').innerText="请输入用户名";
        }
        else if(username.value.length < 6 ||username.value.length > 18){
            console.log(username.value);
            document.getElementById('YHMerror').innerText="格式错误,长度应为6-18个字符";
        }
        else if(!re.test(username.value)){

            document.getElementById('YHMerror').innerText="格式错误,只能包含英文字母和下划线";
        }
        else {
            document.getElementById('YHMerror').innerText ="";
        }
    }
    function YHMonfocu(){
            document.getElementById('YHMerror').innerText ="";
    }
//   密码
    function MMonblus(){
          var password=document.getElementById("password");
          var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{6,}$/;
         // var reg=/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;

        if(password.value==""){
        document.getElementById('MMerror').innerText="请输入密码";
        }
          else if(password.value.length < 6){
             document.getElementById('MMerror').innerText="格式错误,,密码长度至少为6位";
         }

         else if(!re.test(password.value)){
             document.getElementById('MMerror').innerText="格式错误,必须包含英文字母大小写和数字";
        }
         else {
        document.getElementById('MMerror').innerText ="";
        }
}
    function MMonfocu(){
        document.getElementById('MMerror').innerText ="";
    }

//    确认密码
    function QRMMonblus(){
        var password=document.getElementById("password");
        var confirmPassword=document.getElementById("confirmPassword");
        if(confirmPassword.value==""){
            document.getElementById('QRMMerror').innerText="请输入确认密码";
        }
        else if(password.value != confirmPassword.value){
            document.getElementById('QRMMerror').innerText="两次密码输入不一致";
        }
        else {
            document.getElementById('QRMMerror').innerText ="";
        }
    }
    function QRMMonfocu(){
        document.getElementById('QRMMerror').innerText ="";
    }

//    性别
    function XBonblus(){
//        var radios = document.getElementsByName("gender");
//        if(radios.checked == false){
//            document.getElementById('XBerror').innerText="请选择性别";
//        }else {
//            document.getElementById('XBerror').innerText ="";
//        }
    }
    function XBonfocu(){
//        document.getElementById('XBerror').innerText ="";
    }

//    爱好
    function AHonblus(){
        var hobbys = document.getElementsByName("hobby");
        if(hobbys[0].checked == false&&hobbys[1].checked == false&&hobbys[2].checked == false){
            document.getElementById('AHerror').innerText="请选择爱好";
        }else {
            document.getElementById('AHerror').innerText ="";
        }
    }
    function AHonfocu(){
        document.getElementById('AHerror').innerText ="";
    }
//    联系电话
    function LXDHonblus(){
        var phone=document.getElementById("phone");
        var re = /^1\d{10}$/;
        if(phone.value==""){
            document.getElementById('LXDHerror').innerText="请输入联系电话";
        }
        else if(!re.test(phone)){
            document.getElementById('LXDHerror').innerText="电话格式输入错误";
        }
        else {
            document.getElementById('LXDHerror').innerText ="";
        }
    }
    function LXDHonfocu(){
        document.getElementById('LXDHerror').innerText ="";
    }
//    电子邮箱
    function DZYXonblus(){
        var email=document.getElementById("email");
        var re= /[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
        if(email.value==""){
            document.getElementById('DZYXerror').innerText="请输入电子邮箱";
        }
        else if(!re.test(email.value)){
            document.getElementById("DZYXerror").innerHTML="邮箱格式不正确";
        }
        else {
            document.getElementById('DZYXerror').innerText ="";
        }
    }
    function DZYXonfocu(){
        document.getElementById('DZYXerror').innerText ="";
    }

</script>


<body>
<form method="" action="post" name="frm">
    <div >
        <label>用户名</label>
        <input type="text" id="username" class="inputText" placeholder="请输入您的用户名" onfocus="YHMonfocu()" onblur="YHMonblus()" />
        <span id="YHMerror">
        </span>
    </div>

    <div>
        <label>密码</label>
        <input type="password" id="password" class="inputText" placeholder="请输入您的密码" onfocus="MMonfocu()" onblur="MMonblus()"/>
        <span id="MMerror">
        </span>
    </div>
    <div>
        <label>确认密码</label>
        <input type="password" id="confirmPassword" class="inputText" placeholder="请确认您的密码" onfocus="QRMMonfocu()" onblur="QRMMonblus()"/>
        <span id="QRMMerror">
        </span>
    </div>
    <div>
        <label>性别</label>
        <input type="radio"  name="gender" value="male" onfocus="XBonfocu()" onblur="XBMonblus()" checked="true"/>男
        <input type="radio"  name="gender" value="female" onfocus="XBMonfocu()" onblur="XBMonblus()"/>女
        <span id="XBerror">
        </span>
    </div>
    <div>
        <label>爱好</label>
        <input type="checkbox" name="hobby" value="Coding" onfocus="AHonfocu()" onblur="AHonblus()"/>写代码
        <input type="checkbox" name="hobby" value="Running" onfocus="AHonfocu()" onblur="AHonblus()"/>跑步
        <input type="checkbox" name="hobby" value="Sleeping" onfocus="AHonfocu()" onblur="AHonblus()"/>睡觉
        <span id="AHerror">
        </span>
    </div>
    <div>
        <label>联系电话</label>
        <input type="text" id="phone" class="inputText" placeholder="请输入您的联系电话" onfocus="LXDHonfocu()" onblur="LXDHonblus()"/>
        <span id="LXDHerror">
        </span>
    </div>
    <div>
        <label>电子邮箱</label>
        <input type="email" id="email" class="inputText" placeholder="请输入您的电子邮箱" onfocus="DZYXonfocu()" onblur="DZYXonblus()"/>
        <span id="DZYXerror">
        </span>
    </div>
</form>

</body>
</html>

㼛思雨

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
js中用户注册界面验证（31）

JavaScript校验要求： 1.每一项都必须填写内容或者做出选择，不能存在空项； 2.用户名：只能包含英文字母和下划线，长度为6-18个字符； 3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符； 4.确认密码：必须与密码相同； 5.联系电话：确保手机号码的有效性； 6.电子邮箱：确保电子邮箱的有效性； 7.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。...
复制链接

扫一扫

专栏目录