HTML实现简单表单验证(正则表达式、非空判断、输入框提示信息)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习</title> </head> <body> <form action="../HTML/Day Four.html" method="get"> <p>注册</p> <!-- placeholder 输入框提示信息 required 非空判断 pattern 正则表达式--> <!-- 必须为3-16位用户名 --> <p>用户名: <input type="text" name="username" placeholder="请输入3-16位用户名" pattern="^[a-z0-9_-]{3,16}$" required/> </p> <!-- 必须为正确手机号 --> <P>手机号: <input type="text" name="phone" placeholder="请输入手机号" pattern="^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$" required/> </P> <!-- 密码格式包含大小写、数字、特殊符号 --> <p>密码: <input type="password" name="psd" placeholder="请输入密码" pattern="^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,15}$" required/> </p> <!-- 确认密码没有写必须跟密码一致 --> <p>确认密码: <input type="password" name="psd" placeholder="请确认密码" pattern="^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,15}$" required/> </p> <!-- 必须位正确邮箱格式 --> <p>邮箱: <input type="email" name="email" placeholder="请输入正确的邮箱" pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$" required/> </p> <p>性别: <!-- 单选框,性别默认选择男 --> <input type="radio" name="sex" value="boy" checked/>男 <input type="radio" name="sex" value="girl"/>女 </p> <p>兴趣爱好: <!-- 多选框,默认选择敲代码和跳绳 --> <input type="checkbox" checked/>敲代码 <input type="checkbox"/>看电影 <input type="checkbox" checked/>跳绳 <input type="checkbox"/>吃喝玩乐 <input type="checkbox"/>打游戏 </p> <p>选择注册地: <!-- 下拉框 在option后加checked为默认选中--> <select name="注册地"> <option value="guojia">---请选择---</option> <option value="CAN">加拿大</option> <option value="CN">中国</option> <option value="JP">日本</option> <option value="US">美国</option> </select> </p> <p>头像: <!-- 上传暂时点不了 --> <input type="file" required/> <input type="button" value="上传"/> </p> <p> <!-- 点击提交,跳转到../HTML/Day Four.html 点击重置,则重新输入 --> <input type="submit" value="确认提交"/> <input type="reset" value="重置"/> </p> </form> </body> </html>
Statement: If the content on this site infringes upon the legitimate rights and interests of the original author, please contact this site to delete it.