jQuery 实现数据校验提交界面

我就是我 2023-10-06 22:14 12阅读 0赞

#### 阅读目录 ####

*  预览
 *  源码

## 预览 ##

jQuery 实现数据校验提交界面（正则表达式输入框格式限制，邮箱格式限制，下拉列表）  
![在这里插入图片描述][7532a0998d54434daa3470498479d686.gif_pic_center]

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    form{
          
        align-content: center;
    }
    </style>
    <script>
    var provinces=["黑龙江","吉林","辽宁"];
    var citys=[["双鸭山","哈尔滨","香坊区","南岗区"],["吉林市","吉林1","吉林2"],["沈阳","大连","抚顺","鞍山","朝阳"]];
    window.onload=function (){
          
    
        //省份城市下拉列表事件
        //省份下拉列表事件
        var p=document.getElementById("province");
        p[0]=new Option("--请选择--","-1");
        for(var i=0;i<provinces.length;i++){
          
            p[i+1]=new Option(provinces[i],i);
        }
        //城市下拉列表事件
        p.onchange=function (){
          
            var v=p.value;
            var c=document.getElementById("city");
            c.length=0;
            c[0]=new Option("--请选择--","-1");
            for(var j=0;j<citys[v].length;j++){
          
                c[j+1]=new Option(citys[v][j],j);
            }
    
        }
    
        //提示问题下拉列表事件
        var questions=["你初中同桌的名字","你的爱好","喜欢的人的名字","你最喜欢的宠物"];
        var q=document.getElementById("question");
        q[0]=new Option("--请选择--","-1");
        for (var i=0;i<questions.length;i++){
          
            q[i+1]=new Option(questions[i],i);
        }
    
        var btn_u=document.getElementById("username");
        var btn_email=document.getElementById("email");
        var btn_passwordagine=document.getElementById("password_agine");
        //用户名输入限制
        btn_u.onchange=function (){
          
            var usn=document.getElementById("username").value;
            var exp=new RegExp("^\\w{6,}$");
            if(exp.test(usn)){
          
                alert("你的用户名成功输入");
            }else{
          
                alert("用户名格式不正确");
            }
        }
        //邮箱输入限制
        btn_email.onchange=function (){
          
            var ema=document.getElementById("email").value;
            var expemail=new RegExp("^([a-zA-Z]|[0-9])(\\w|\\-)+@[a-zA-Z0-9]+\\.([a-zA-Z]{2,4})$");
            if (expemail.test(ema)){
          
                alert("邮箱成功输入");
            }else{
          
                alert("邮箱格式不正确");
            }
        }
        //密码设置两次必须相同限制
        btn_passwordagine.onchange=function (){
          
            var pasag=document.getElementById("password_agine").value;
            var pas=document.getElementById("password").value;
            if (pas==pasag){
          
                alert("密码设置成功");
            }else{
          
                alert("第二次密码与第一次不符");
            }
        }
    }
    </script>
    </head>
    <body>
    
    <form >
      您想要的用户名：<span style="color: red" > * </span><input type="text" id="username" required="required"><br>
      您的性别：<span style="color:red;"> * </span><input type="radio" id="man" name="sex" checked >男 <input type="radio" id="woman" name="sex">女<br>
       您来自：<span style="color: red"> * </span>
        <select id="province">
    
        </select>
        <select id="city">
    
        </select>
        <br>
        提示问题：<span style="color:red"> * </span>
        <select id="question">
    
        </select>
        <br>
        答案：<span style="color: red"> * </span> <input type="text" id="answer" required="required"><br>
        <hr />
        电子邮件地址：<span style="color: red"> * </span> <input type="text" id="email"  required="required" ><br>
        设置密码：<span style="color: red"> * </span> <input type="password" id="password" required="required"><br>
        再次输入密码：<span style="color: red"> * </span> <input type="password" id="password_agine" required="required"><br>
        <hr/>
        <input type="submit" align="center" value="同意以上服务条款，提交注册信息" >
    
    </form>
    
    </body>
    </html>

[7532a0998d54434daa3470498479d686.gif_pic_center]: https://img-blog.csdnimg.cn/7532a0998d54434daa3470498479d686.gif#pic_center