基于HTML+css+js设计简易的汽车用户注册界面

JayDen2001
已于 2022-03-26 18:57:59 修改
阅读量1.2k
点赞数
于 2022-03-26 18:29:59 首次发布
本文链接：https://blog.csdn.net/qq_66183206/article/details/123760813
版权
应用背景为假设以福建省某汽车4s店用户的注册管理来实现，设置用户名、密码、二次确认密码、邮箱、真实姓名、所属区市、汽车类型这几个注册信息，在注册新用户的过程中，每个注册信息都借助JavaScript与正则表达式的相关知识进行信息合理性检查，而背景则是同时连接本地图片进行设置，至于注册框的颜色设置以及布局效果则是根据css与div的相关知识内容进行实现，详细内容介绍代码中均有注释。
HTML代码
<span style="font-size:14px Times New Roman;">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTTP标题信息(HTTP-EQUIV) -->
            <title>4s店用户注册页面</title>
            
            <link type="text/css" rel="stylesheet" href="register.css"> <!--引入外部定义好的register.css文件 -->
            
            <script type="text/javascript" src="register.js"></script>  <!--引入外部定义好的register.js文件 -->
            
        </head>
        <body>
            <form action="" method="" οnsubmit="return validateForm()"> <!-- 当触发提交事件时调用validateForm()方法  -->
                <table border="26" align="center" width="50%">
                    <caption >Owner  Registration</caption>
                    <tr>
                        <td align="right">
                            <sup><font color="red"></font></sup>User name：
                        </td>
                        <td><input style="background-color:transparent" type="text" name="username" id="username" class="input_class" οnblur="checkUsername(this)" /><span id="username_span">  </span></td>                    
                    </tr>
                    <body background="D:/web/background.jpg"></body>
                    <tr>
                        <td align="right">
                            <sup><font color="red"></font></sup>Password：
                        </td>
                        <td><input style="background-color:transparent" type="password" name="password" id="password" class="input_class" οnblur="checkPassword(this)" /><span id="password_span"></span></td>                  
                    </tr>
                    
                    <tr>
                        <td align="right">
                            <sup><font color="red"></font></sup>Repassword：
                        </td>
                        <td><input style="background-color:transparent" type="password" name="rePassword" id="rePassword" class="input_class" οnblur="checkRePassword(this)" /></td>                    
                    </tr>
                    
                    <tr>
                        <td align="right">
                            <sup><font color="red"></font></sup>Email：
                        </td>
                        <td><input style="background-color:transparent" type="text" name="Email" id="Email" class="input_class" οnblur="checkEmail(this)" /></td>                   
                    </tr>
                    
                    <tr>
                        <td align="right">
                            <sup><font color="red"></font></sup>RealName：
                        </td>
                        <td><input style="background-color:transparent" type="text" name="realName" id="realName" class="input_class" οnblur="checkName(this)" /></td>                  
                    </tr>
                    
                    <tr>
                        <td align="right">
                            <sup><font color="red"></font></sup>City：
                        </td>
                        <td><select name="province" id="province" οnblur="checkProvince(this)">
                            <option value="--请选择--">--option--</option>
                            <option value="闽A">福州</option>
                            <option value="闽B">莆田</option>
                            <option value="闽C">泉州</option>
                            <option value="闽D">厦门</option>
                            <option value="闽E">漳州</option>
                            <option value="闽F">龙岩</option>
                            <option value="闽G">三明</option>
                            <option value="闽H">南平</option>
                            <option value="闽J">宁德</option>
                            <option value="闽K">省属系统</option>
                        </select><span id="province_span"></span></td>                  
                    </tr>
                    
                    <tr>
                        <td align="left" colspan="2">
                            <sup><font color="red"></font></sup>Car type：
                        <input type="radio" name="car_type" id="Benz" value="奔驰" checked="checked" />Benz <!-- 技术方向默认选中奔驰 -->
                        <input type="radio" name="car_type" id="Bmw" value="宝马" />Bmw
                        <input type="radio" name="car_type" id="Audi" value="奥迪" />Audi
                        <input type="radio" name="car_type" id="Lexus" value="雷克萨斯" />Lexus
                        <input type="radio" name="car_type" id="Land rover" value="路虎" />Land rover
                        <input type="radio" name="car_type" id="Porsche" value="保时捷" />Porsche
                        <input type="radio" name="car_type" id="Bentley" value="宾利" />Bentley
                        <input type="radio" name="car_type" id="Ferrari" value="法拉利" />Ferrari
                        <input type="radio" name="car_type" id="Lamborghini" value="兰博基尼" />Lamborghini
                        <input type="radio" name="car_type" id="McLaren" value="迈凯伦" />McLaren
                        <input type="radio" name="car_type" id="Rolls royce" value="劳斯莱斯" />Rolls royce
                        <input type="radio" name="car_type" id="Maserati" value="玛莎拉蒂" />Maserati
                        <input type="radio" name="car_type" id="Tesla" value="特斯拉"  />Tesla
                        <input type="radio" name="car_type" id="Cadillac" value="凯迪拉克" />Cadillac
                        <input type="radio" name="car_type" id="Infiniti" value="英菲尼迪" />Infiniti
                        <input type="radio" name="car_type" id="Bugatti Veyron" value="布加迪威龙" />Bugatti Veyron
                        <input type="radio" name="car_type" id="Aston Martin" value="阿斯顿马丁" />Aston Martin
                        </td>                   
                    </tr>
                    
                    <tr>
                        <td align="center" colspan="2">  <!-- 合并两列 -->
                            <input style="background-color:transparent" type="submit" class="aaa" value="Enroll" />
                            <input style="background-color:transparent" type="reset" class="aaa" value="Reset" />
                        </td>
                    </tr>
                </table>
            </form>
        </body>
    </html>
     
    </span>


CSS代码
<span style="font-size:14px Times New Roman;">
.input_class {  /*设置class属性名称为input_class的标签内容*/
    width:250px;
    height:16px;    
}
 
caption{        /*设置caption标签内容*/
    font-size:30px;
    color:rgb(251, 255, 0);
    text-shadow: rgb(153, 0, 255) 6px 0px 5px; 
    font-stretch: wider;
    font-weight: 650; 
    font-family:Times New Roman;
}
 
.aaa{          /*设置class属性名称为aaa的标签内容*/
    font-size:16px;
    font-weight: bold;
    font-family:Times New Roman;
}
 
</span>


JavaScript代码
<span style="font-size:14px;">
        //用户名：
        var  usernameRegex = /^\w{3,15}$/;
        //密码：
        var passwordRegex = /^\w{6,12}$/;
        //邮箱：
        var emailRegex = /^\w+@\w+(\.\w+)+$/;
        //真实姓名：
        var realNameRegex = /^[\u4e00-\u9fa5]{2,5}$/;
        function validateForm(){ //定义validateForm方法用于客户端校验
            var flag = true;
            //校验用户名
            var usernameNode = byId("username"); //获得ID值为username的节点对象
            var username = usernameNode.value;   //获得usernameNode节点的值，即用户在username文本框内填写的值
            if(!usernameRegex.test(username)){    //验证获得到的值是否符合正则表达式
                byId("username_span").style.color = "red"; //如果不符合，则将ID值为username_span的节点对象内容变为红色
                flag = false;        //返回false，不提交
            }
            
            //校验密码
            var passwordNode = byId("password");  //获得ID值为password的节点对象
            var password = passwordNode.value;
            if(!passwordRegex.test(password)){
                byId("password_span").style.color = "red";
                flag = false;
            }
            
            //确认密码
            var rePasswordNode = byId("rePassword");  //获得ID值为rePassword的节点对象
            var rePassword = rePasswordNode.value;
            if(!password==rePassword){
                byId("rePassword_span").style.color = "red";
                flag = false;
            }else if(!passwordRegex.test(rePassword)){
                byId("rePassword_span").style.color = "red";
                flag = false;
            }else{
                byId("rePassword_span").style.color = "green";
            }
            
            //校验邮箱
            var emailNode = byId("Email");  //获得ID值为Email的节点对象
            var email = emailNode.value;
            if(!emailRegex.test(email)){
                byId("Email_span").style.color = "red";
                flag = false;
            }
            
            //校验姓名
            var realNameNode = byId("realName");  //获得ID值为realName的节点对象
            var realName = realNameNode.value;
            if(!realNameRegex.test(realName)){
                byId("realName_span").style.color = "red";
                flag = false;
            }
            
            //校验城市
            var cityNode = byId("city");  //获得ID值为city的节点对象
            var city = cityNode.value;
            if("--请选择--" == city){
                byId("city_span").style.color = "red";
                flag = false;
            }
 
            return flag;
        }
            
        function byId(id){  //自定义方法，用于获取传递过来的ID值对应的节点对象
            return document.getElementById(id);
        }
            
        function checkUsername(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
            //校验用户名
            var username = node.value;  //得到传递过来的节点对象的值
            if(!usernameRegex.test(username)){  //验证是否符合节点对应的正则表达式
                byId("username_span").style.color = "red"; //不符合，相应内容变成红色
            }else{
                byId("username_span").style.color = "green";  //符合，相应内容变成绿色
            }
        }
        
        function checkPassword(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
            //校验密码
            var password = node.value;
            //alert("111");
            if (!passwordRegex.test(password)) {
                byId("password_span").style.color = "red";
            }
            else {
                byId("password_span").style.color = "green";
            }
        }   
            
        function checkRePassword(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
            //确认密码              
            var rePassword = node.value;
            var password = byId("password").value;
            //alert(repassword+"***"+password);         
            if(!password==rePassword){                  
                byId("rePassword_span").style.color = "red";
            }else if(!passwordRegex.test(rePassword)){
                byId("rePassword_span").style.color = "red";
            }else{
                byId("rePassword_span").style.color = "green";
            }
        }       
 
        function checkEmail(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
            //校验邮箱
            var email = node.value;
            if(!emailRegex.test(email)){
                byId("Email_span").style.color = "red";
            }else{
                byId("Email_span").style.color = "green";
            }
        }
            
        function checkName(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
            var realName = node.value;
            if(!realNameRegex.test(realName)){
                byId("realName_span").style.color = "red";
            }else{
                byId("realName_span").style.color = "green";
            }
        }
        
        function checkcity(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
            var city = node.value;
            if("--请选择--" == city){
                byId("city_span").style.color = "red";
            }else{
                byId("city_span").style.color = "green";
            }
        }
 
</span>