js生成表单

keep runing

已于 2024-08-03 10:09:55 修改

阅读量5

点赞数

文章标签： javascript 前端 java

于 2023-11-15 20:40:59 首次发布

本文链接：https://blog.csdn.net/qq_44881772/article/details/134428463

版权

1.首先一般的注册表单的框架部分

<form>

</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册表单验证</title>
    <style type="text/css">

    </style>
    <script type="text/javascript">

        function mouseOUT() {
            var uname = document.getElementById("uname").value;
            if (uname ==""){
                document.getElementById("uname1").innerHTML = "用户名长度不能为空";
                document.getElementById("uname1").style.color = "red";
                return false;
            }else if (uname.length<4 || uname.length>10){
                document.getElementById("uname1").innerHTML = "用户名格式不正确";
                document.getElementById("uname1").style.color = "red";
                return false;
            }else {
                document.getElementById("uname1").innerHTML = "√";
                document.getElementById("uname1").style.color = "green";
                return true;

            }
        }
        function mouseOUTpwd() {
            var upwd = document.getElementById("upwd").value;
            if (upwd==""||upwd.length == 0){
                document.getElementById("upwd1").innerHTML = "密码长度不能为空";
                document.getElementById("upwd1").style.color = "red";
                return false;
            }else if (uname.length<4 || uname.length>10){
                document.getElementById("upwd1").innerHTML = "密码格式不正确";
                document.getElementById("uname1").style.color = "red";
                return false;
            }else {
                document.getElementById("upwd1").innerHTML = "√";
                document.getElementById("upwd1").style.color = "green";
                return true;

            }
        }
        function mouseOUTrepwd() {
            var upwd = document.getElementById("upwd").value;
            var reupwd = document.getElementById("reupwd").value;
            if (reupwd ==""){
                document.getElementById("reupwd1").innerHTML = "密码长度不能为空";
                document.getElementById("reupwd1").style.color = "red";
                return false;
            }else if (reupwd.length<4 || reupwd.length>10){
                document.getElementById("reupwd1").innerHTML = "密码格式不正确";
                document.getElementById("reupwd1").style.color = "red";
                return false;
            }else if (upwd == reupwd){
                document.getElementById("reupwd1").innerHTML = "√";
                document.getElementById("reupwd1").style.color = "green";
                return true;

            }
        }
        function isemail() {
            var email = document.getElementById("email").value;
            var emailReg=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
            if(emailReg.test(email)){
                document.getElementById("email1").innerHTML = "√";
                document.getElementById("email1").style.color = "green";
                return true;
            }else{
                ocument.getElementById("email1").innerHTML = "邮箱格式不对";
                document.getElementById("email1").style.color = "red";
                return false;
            }
        }
        function isphone() {
            var phone = document.getElementById("phone").value;
            var phoneReg=/^1[3-9]\d{9}$/;
            if(phoneReg.test(phone)){
                document.getElementById("phone1").innerHTML = "√";
                document.getElementById("phone1").style.color = "green";
                return true;
            }else{
                document.getElementById("phone1").innerHTML = "手机格式不对";
                document.getElementById("phone1").style.color = "red";
                return false;
            }
        }

        function isagree() {
            var agree = document.getElementById("agree");
            if (agree.checked){
                document.getElementById("tijiao1").disabled = false;
                //disabled为true时，表示隐藏
            }else{
                document.getElementById("tijiao1").disabled = true;
                //disabled为false时，表示显示
            }
        }
        function checke() {
            if(mouseOUT()==true && mouseOUTpwd()==true && mouseOUTrepwd()==true && isemail()==true && isphone()==true){
                return true;
            }else{
                return false;
            }

        }

    </script>
</head>
<body>
    <form method="post" action="jslearn.html" onsubmit="return checke()">
        <table>
            <tr>
                <td></td>
                <td><h2>注册</h2></td>
                <td></td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="uname" id="uname"  onblur = "mouseOUT()" value=""/></td>
                <td id="uname1">输入字符长度在4到10之间</td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="upwd" id="upwd" value="" onblur="mouseOUTpwd()"/></td>
                <td id="upwd1">密码字符长度为6~10位数字</td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="reupwd" id="reupwd" value="" onblur="mouseOUTrepwd()"/></td>
                <td  id="reupwd1"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="" checked = "checked"/>男
                    <input type="radio" name="sex"  value=""/>女

                </td>
                <td id="sex1"></td>
            </tr>

            <tr>
                <td>爱好：</td>
                <td><input type="checkbox" name="hobby" id="hobby1" value="sing"/>唱歌
                <input type="checkbox" name="hobby" value="dancing"/>跳舞
                <input type="checkbox" name="hobby" value="rap"/>rap
                <input type="checkbox" name="hobby" value="basketball"/>篮球
                <input type="checkbox" name="hobby" value="swimming"/>游泳</td>
                <td></td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td><input type="date" name="day" id="day" value=""/></td>
                <td id="day1"></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="email" name="email" id="email" value="" onblur="isemail()"/></td>
                <td id="email1"></td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td><input type="text" name="phone" id="phone" value="" onblur="isphone()"/></td>
                <td id="phone1"></td>
            </tr>
            <tr>
                <td>城市：</td>
                <td><select>
                    <option>北京</option>
                    <option>上海</option>
                    <option  selected="selected">深圳</option>
                    <option >广州</option>
                </select>
                    </td>
                <td id="city1"></td>
            </tr>
            <tr>
                <td>协议：</td>
                <td><textarea rows="6" cols="6">
                    afadfasgjljkjljlk
                </textarea>
                    </td>
                <td></td>
            </tr>
            <tr>
                <td>协议：</td>
                <td>
                    <input type="checkbox" id="agree" onchange="isagree()"/>我同意
                </td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button type="submit" id="tijiao1"  name="tijiao" disabled="disabled"/>提交</button>
                    <input type="reset" name="提交"/>
                </td>
                <td></td>
            </tr>

        </table>
    </form>
</body>
</html>

这里首先用各个类型的标签组成一个html页面

然后为表单的元素添加点击事件

常用的有onblur（）失去焦点事件类似于输入框输入然后不输入，输入光标消失，或者光标闪烁在其他控件上

onfoucks 焦点事件

onchange（）域改变事件

onmouseover （）光标移入事件

onmouseout（）光标移除事件

onclike（）点击事件

onload （）页面被加载完成事件

onsubmit（）提交按钮被点击事件

在option中，在标签中select = “select” 表示默认的是这个标签的值，或者在这一栏上

<select>
     <option>北京</option>
     <option>上海</option>
     <option  selected="selected">深圳</option>
     <option >广州</option>
 </select>

单选按钮：

<td>
    <input type="radio" name="sex" value="" checked = "checked"/>男
    <input type="radio" name="sex"  value=""/>女

</td>

checked默认选择为当前标签的选项

默认的按钮显示：

<td>
    <button type="submit" id="tijiao1"  name="tijiao" disabled="disabled"/>提交</button>
    <input type="reset" name="提交"/>
</td>

disabled = “disabled”表示变灰隐藏

var agree = document.getElementById("agree");
            if (agree.checked){
                document.getElementById("tijiao1").disabled = false;
                //disabled为true时，表示隐藏
            }else{
                document.getElementById("tijiao1").disabled = true;
                //disabled为false时，表示显示
            }

disable = false时表示显示，diabled = true时表示隐藏