HTML18：表单初级验证
表单初级验证
-
思考？为什么要进行表单验证
- 减轻服务器压力
- 保证数据安全性
-
常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
代码show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单</title>
</head>
<body>
<h1>注册</h1>
<form action="我的第一个HTML.html" method="get">
<p>名字：<input type="text" name="username" placeholder="请输入您的用户名" maxlength="10" size="30" /></p>
<p>密码：<input type="password" name="pwd" required/></p>
<p>性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex" />女
</p>
<p> 爱好：
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="sleep" checked>敲代码
<input type="checkbox" name="hobby" value="sleep">聊天
<input type="checkbox" name="hobby" value="sleep">跑步
</p>
<p>
<!-- 增强鼠标可用性-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
自定义邮箱验证
<!--https://www.jb51.net/tools/regexsc.htm -->
<input type="text" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" name="diyemail">
</p>
<p><input type="submit" /><input type="reset" value="清空表单" ></p>
</form>
</body>
</html>
彩蛋
1.在浏览器搜索常用正则表达式：
https://www.jb51.net/tools/regexsc.htm
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
