用html写的表单能进行相应的验证，应用正则表达式

最新推荐文章于 2023-02-15 06:15:47 发布

Mr_jianghanlin

最新推荐文章于 2023-02-15 06:15:47 发布

阅读量662

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/Mr_jianghanlin/article/details/105257134

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

html5css3 的表单能进行相应的验证，应用正则表达式

首先话不多说先看看效果图：

在这里插入图片描述

在未输入的情况下它会自动检测出错误并提示信息，在输入正确的（输入合法的意思）情况下会给你提示你的输入合法正确，若没有或者忘记填，它也无法提交，并且会提示给你相关的信息下面来看看图片：

在这里插入图片描述
提交的问题

下面来看看实现这个实验所需要的重点所要掌握的一些基本属性：

首先是input标签：type属性：

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入。
submit	定义提交按钮。
email	应该包含 e-mail 地址的输入域。
url	URL 地址的输入域
number	应该包含数值的输入域。
range	应该包含一定范围内数字值的输入域。
Date Pickers	可供选取日期和时间的新输入类型。
search	用于搜索域。
color	用于选取颜色。

form标签：Action属性：向服务器提交表单的通常做法是使用提交按钮

##form标签：

属性	描述
accept-charset	规定在被提交表单中使用的字符集
autocomplete	规定浏览器应该自动完成表单
enctype	规定被提交数据的编码
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标

Method属性：提交表单时所用的HTTP方法（get post）

类型	描述
get默认	表单数据在页面地址栏中是可以看见的；
post	被提交的表单数据在页面地址栏是不可见的

其中最重要的就是身份证的正则表达式(这个只是我个人的写法，可以参考)：

pattern="[1-9]{1}\d{9}((0\d)|(1[0-2]))(([0-2]\d)|(3[0-1]))\d{3}[0-9 X]"

还有许多属性下一博客将会详细讲解表单

下面来看看说实现表单的HTML文件：



<!DOCTYPE html>
<html>
<head>
	<title>biaodan</title>
	<link rel="stylesheet" href="table-style.css">
</head>
<body>

	<h1>员工信息登记表</h1>
	<form >
	用户登录名： <input type="text" name="fname" class="one"  disabled placeholder="jhl@163.com"  style="background-color: #ebebeb"/><br>
	真实信息：<input type="text" name="sign" class="one there" placeholder="江翰林" required pattern="\D+"/>(必填，只能输入汉字)</br>
	真实年龄：<input type="number" name="age" min="18" max="150"  class="one there " required />(必填)</br>
    出生日期：<input type="date" name="date" class="one there "  required />(必填)</br>
	电子邮件：<input type="email" name="email" class="one there" placeholder="123987@126.com" required/>(必填)</br>
	省份证号：<input type="text" name="number1" class="one there  "  required pattern="[1-9]{1}\d{9}((0\d)|(1[0-2]))(([0-2]\d)|(3[0-1]))\d{3}[0-9 X]"/>(必填,能够以数字，字母x结尾的身份证号)</br>
    手机号码：<input type="text" name="number" class="one there " required pattern="\d{11}"/>(必填)</br>
    幸运颜色：<input type="color"  class="there two " />(请选择你喜欢的颜色)</br>
 	 <input type="submit"class="two four"/>  <input type="reset"  value="重置" class="two four"/>
	</form>
</body>
</html>

还需要一些样式的修饰用css 链入式书写，看起来简洁css代码：

    .one{
        height: 25px;
        width:200px;
        background: white url("bitian.png") no-repeat 98% center;
        background-size: 10% 95%;
        border: 1px solid #969896;
    }
    .two{
        height: 20px;width:100px;
    }
    .there{
        margin-left: 29px;
    }
    .four{
        margin-left: 140px;
        height: 30px;
        width: 100px;
        background-color: #70AD47;
    }
    h1{
        text-align: center;
    }
    body{
        background-color:pink;
    }

   .there:focus:invalid{
        width: 250px;
        border: #86C181;
        box-shadow:  0px 0px 3px #86C181;
        border: 1px solid greenyellow;
        background: #fff url("warn.png") no-repeat 98% center;
        background-size: 10% 95%;
    }
    .there:focus:valid{
        width: 250px;
        border: #86C181;
        box-shadow:  0px 0px 3px #86C181;
        border: 1px solid greenyellow;
        background: #fff url("right.png") no-repeat 98% center;
        background-size: 10% 95%;
    }
    .four:hover{
        opacity: 80%;
        cursor: pointer;

    }

以上就可以实现上图的效果，并且可以检查一些输入不合法的错误。

上述代码用的图片：

在这里插入图片描述

Mr_jianghanlin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
用html写的表单能进行相应的验证，应用正则表达式

html5css3 的表单能进行相应的验证，应用正则表达式首先话不多说先看看效果图：在未输入的情况下它会自动检测出错误并提示信息，在输入正确的（输入合法的意思）情况下会给你提示你的输入合法正确，若没有或者忘记填，它也无法提交，并且会提示给你相关的信息下面来看看图片：下面来看看实现这个实验所需要的重点所要掌握的一些基本属性：首先是input标签：type属性：类型描述...
复制链接

扫一扫