用户注册界面js校验+表单提示

来源:互联网   编辑:思良  发表时间:2020-03-03  关注度:478  

JavaScript校验要求:

1.每一项都必须填写内容或者做出选择,不能存在空项;

2.用户名:只能包含英文字母和下划线,长度为6-18个字符;

3.密码:必须包含英文字母大小写和数字,长度不能少于6个字符;

4.确认密码:必须与密码相同;

5.联系电话:确保手机号码的有效性;

6.电子邮箱:确保电子邮箱的有效性;

7.如果用户没有按照以上要求输入信息,则当光标离开该项时,在该项的右侧用红色字体给出相应的提示信息。



代码1:
<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>


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

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇:帝国cms伪静态设置方法


上一篇:帝国CMS后台添加关键字时自动复制到TAGS(同步更新)的方法


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(0条评论)

选择头像
     

新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信