html表单

最新推荐文章于 2025-03-11 16:55:18 发布

yogima

最新推荐文章于 2025-03-11 16:55:18 发布

阅读量1.3k

点赞数

分类专栏： java web 文章标签： html 表单验证

本文链接：https://blog.youkuaiyun.com/yogima/article/details/79591404

版权

java web 专栏收录该内容

23 篇文章

订阅专栏

表单本身不可见，一个文本字段默认长度为20字符。

<form action="">

<!--文本框-->
Username: <input type="text" name="user"><br> 

<!--输入密码-->
Password: <input type="password" name="password">

<!--单选-->
sex: <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 

<!--复选框-->
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 

<!--下拉列表-->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option><!--selected表预选项，若均无则预选项为第一个-->
<option value="audi">Audi</option>
</select>

<!--文本域-->
<textarea rows="10" cols="30">
可在此填入一些提示信息
</textarea>

<!--按钮，value的值是按钮上的文字-->
<input type="button" value="Hello world!">

</form>

表单数据的提交：

<form action="/statics/demosource/demo-form.php" method="post">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

带边框的表单：使用fieldset，<legend> 定义了<fieldset>元素的标题

<body>
<form action="">
    <fieldset style="width:320px">
        <legend>企业会员登录</legend>
        <br/>
        会员名：<input type="text" placeholder="请输入会员名"/><br/>
        <br/>
        用户名：<input type="text" placeholder="请输入用户名"/><br/>
        <br/>
        密码：<input type="password" placeholder="请输入密码"/><br/>
        <br/>
    </fieldset>
</form>
</body>

placeholder和value：IE6/7/8不支持placeholder，只能用value+js。
如果用的是value，想要鼠标focus后默认文字消失，移开后默认文字又重现，需要使用js，placeholder本身自带focus和blur功能。如果value和placeholder均存在，优先显示value（value是可以被提交的而placeholder只是占位符），因此作文本框提示时应优先使用placeholder。

警告form input without an associated label or title attribute：
遵循html5的标准，webstorm就是想要在 <input type="text" /> 或者 <textarea></textarea> 外层套一个label标签或者添加 placeholder 属性。

下面是给上面写的简单的表单添加了登录按钮以及跳转，还有会员名不能为中文，以及表单不能为空以后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业会员登录</title>
</head>
<body>
    <form  target="_blank" action="welcome.html/" name="form1" onsubmit="myCheck()">
        <fieldset style="width:320px;text-align: center">
            <legend>企业会员登录</legend>
            <br/>
            会员名：<input type="text" onblur="isChinese(this.value)" placeholder="请输入会员名"/><br/>
            <br/>
            用户名：<input type="text" placeholder="请输入用户名"/><br/>
            <br/>
             &nbsp; &nbsp;密码：<input type="password" placeholder="请输入密码"/><br/>
            <br/>
            <input type="submit" value="登录">
            <br/>
        </fieldset>
    </form>
</body>
<script language="javascript">
    //会员名只能为中文
    function isChinese(obj){
        var reg=/^[\u0391-\uFFE5]+$/;
        if(obj!=""&&!reg.test(obj)){
            alert('必须输入中文！');
            return false;
        }
    }
    //表单不能为空
    function myCheck()
    {//循环所有的表单元素； 也可以用jQuery：$("#表单id")[0].elements.length-1
        for(var i=0;i<document.form1.elements.length-1;i++) //下面减一是因为数组的下标为0
        {
            if(document.form1.elements[i].value=="")
            {
                alert("当前表单不能有空项");
                document.form1.elements[i].focus();
                return false;
            }
        }
        return true;
    }
</script>
</html>

跳转网页使用action实现，当然这里的welcome.html得另写，并且要在同一目录下。
js部分参考了JS表单验证-12个常用的JS表单验证

前面的js部分存在两个问题：
1.表单为空时提交会出现提示，但是点了确定之后，网页依旧跳转。
原因是return false的这种写法，需要写成这样：onsubmit="return myCheck()"（但并不是符合标准的做法）
或者改成如下：

<form action="welcome.html" name="form1" onsubmit="myCheck(event)">
XXX
</form>
<script>
  function myCheck(e)
    {//循环所有的表单元素； 也可以用jQuery：$("#表单id")[0].elements.length-1
        for(var i=0;i<document.form1.elements.length-1;i++) //下面减一是因为数组的下标为0
        {
            if(document.form1.elements[i].value=="")
            {
                alert("当前表单不能有空项");
                document.form1.elements[i].focus();
                e.preventDefault();
                return false;
            }
        }
        return true;
    }
</script>

这里依旧留下了return false和return true 是因为这样的写法要是去掉会使得空了多少个文本框就会出现多少次提示。如果要去掉的话，需要把alert写在循环的外面（是否有空的状态用其他变量来标记）。

2.前面的只能为中文，只是对blur进行了监听，当点击确认之后，只要不再键入那个空，这个提示是不会再跳出来的，也即不会在submit的时候进行判断。
解决：最终的检测都要在submit里面做，也就是对是否为中文的检测也应该放到mycheck函数里，如果不是中文，则 e.preventDefault();

另一个表单验证例子：（之前写的，可能会有问题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css">
        div#buttonLayer{text-align:center}
    </style>
</head>
<body>
    <form action="" name="form1" onsubmit="test(event)">
        <fieldset style="width:350px">
            <legend>新用户注册</legend>
            <br/>
            姓名： &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" name="name"/><br/>
            <br/>
            密码： &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="password" name="passwd"/><br/>
            <br/>
            性别： &nbsp; &nbsp; &nbsp; &nbsp;<input type="radio" name="sex" value="male">男 &nbsp; &nbsp; &nbsp;<input type="radio"name="sex" value="female">女<br/>
            <br/>
            身份证号码：<input type="text" name="idNum"/><br/>
            <br/>
            籍贯： &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" name="addr"/><br/>
            <br/>
            Email地址： &nbsp;<input type="text" name="email"/><br/>
            <br/>
            手机号码： &nbsp; &nbsp;<input type="text" name="tel"/><br/>
            <br/>
            开户银行： &nbsp; &nbsp;<input type="text" name="bank"/><br/>
            <br/>
            银行卡号： &nbsp; &nbsp;<input type="text" name="card"/><br/>
            <br/>
            <div id="buttonLayer">
                 <input type="submit" value="登录"> &nbsp; &nbsp; &nbsp; &nbsp;
                <input type="reset" value="重置">
                <br/>
            </div>
        </fieldset>
    </form>



    <script>

        function isChinese(obj){
            var reg=/^[\u4e00-\u9fa5]+$/;
            if(obj!=""&&!reg.test(obj)){
                return false;
            }
        }

        function test(e) {
            var mailreg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            var passwdreg =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
            var phonereg = /^1\d{10}$/;
            var cardreg = /^\d{16}|\d{19}$/;
            var emptyFlag = 0;
            for(var i=0;i<document.form1.elements.length;i++)
            {
                if(document.form1.elements[i].value=="")
                {
                    emptyFlag = 1;
                }
            }
            if(emptyFlag == 1)
            {
                alert("当前表单不能有空项");
                e.preventDefault();
            }
            if(!isChinese(document.form1.name.value) || !isChinese(document.form1.addr.value) || !isChinese(document.form1.bank.value))
            {
                alert('姓名、籍贯、开户银行请输入中文');
                e.preventDefault();
            }
            else if(!mailreg.test(document.form1.email.value))
            {
                alert('请输入有效的邮箱！');
                e.preventDefault();
            }
            else if(!passwdreg.test(document.form1.passwd.value))
            {
                alert('密码必须包含数字和字母！并且长度为8-16位！');
                e.preventDefault();
            }
            else if(!phonereg.test(document.form1.tel.value))
            {
                alert('密码必须包含数字和字母！并且长度为8-16位！');
                e.preventDefault();
            }
            else if(!cardreg.test(document.form1.card.value))
            {
                alert('银行卡号必须为16位或19位！');
                e.preventDefault();
            }
        }
    </script>
</body>
</html>