input表单的初级验证

我们平时在网页上填写表单的时候，往往都会发现填写表单内容时有一定的要求，这就是所谓的表单验证。

使用表单验证的好处主要有：

①减轻服务器的压力；②保证数据的可行性和安全性

实际开发中，表单验证基本使用js完成的，但是html中的input表单也提供一些初级的验证方法，主要有以下3种：

①placeholder属性   ②required属性    ③pattern属性

接下来就简单介绍下这三个属性如何使用！

1.placeholder属性

placeholder属性 是input 类型的文本框提供的一种提示，可以描述文本框期待用户输入的内容，提示语默认显示，当文本框中输入内容时提示语消失 -->

它适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型。

用户名：<input type="text" name="name" placeholder="用户名由英文和数字组成">

 <!-- 此处的属性 placeholder="用户名由英文和数字组成"  则是一种提示语，提示用户，有效用户名的格式-->

效果如图：

 2. required属性

required属性 规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型 

手机号：<input type="tel" name="tel" id="" required >

 <!-- 此处的required属性  表示这个手机号表单是必填项，不填写则无法提交表单内容-->

 效果如图： 

3. pattern属性

pattern属性 指用户输入的内容必须符号正则表达式所指的规则，否则就不能提交表单

手机号：<input type="tel" name="tel" id="" required pattern="^1[358]\d{9}">

<!--pattern属性的属性值，即为正则表达式。

    ^1[358]\d{9} 具体表示为：^1以1开头  [358]在358中任选一个  \d表示数字  \d{9}表示有9个数字 -->

 如果所填写的内容不符规则，那么会出现如下图效果：

对于pattern属性目前只需要了解即可，正则表达式在后期会仔细介绍。