神奇的代码
暂且叫做html5.css
/* === HTML5 validation styles === */ .myform select:required, .myform input:required, .myform textarea:required { background: #fff url(../img/red_asterisk.png) no-repeat 99% center; } .myform select:required:valid, .myform input:required:valid, .myform textarea:required:valid { background: #fff url(../img/valid.png) no-repeat 99% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; } .myform select:focus:invalid, .myform input:focus:invalid, .myform textarea:focus:invalid { background: #fff url(../img/invalid.png) no-repeat 99% center; box-shadow: 0 0 5px #d45252; border-color: #b03535 }完整的html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>申请电商开店</title> <meta content="initial-scale=1, maximum-scale=1"> <link href="http://www.likecs.com/favicon.ico"> <meta content="yes"> <meta content="black"> <!-- boot --> <link type="text/css" href="http://www.likecs.com/{sh::PUB}css/font-awesome.min.css"> <link href="http://www.likecs.com/{sh::PUB}sui/css/sm.min.css"> <link href="http://www.likecs.com/{sh::PUB}sui/css/sm-extend.min.css"> <link href="http://www.likecs.com/{sh::PUB}plugin/html5/css/html5.css"> </head> <body> <header> <a href="{sh::U(\'OpenStore/index\')}"> <span></span> 返回 </a> <h1 class=\'title\'>申请电商开店</h1> </header> <div> <form action="" onsubmit="return checkForm();" method="post"> <div> <ul> <li> <div> <div><i></i></div> <div> <div>手机号</div> <div> <input type="text" placeholder="用于登录" pattern="^1[0-9]{10}$" required oninvalid="this.setCustomValidity(\'请输入正确的号码\');" oninput="setCustomValidity(\'\')"> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>密码</div> <div> <input type="password" placeholder="6~20位" pattern="^[a-zA-Z0-9]\w{5,19}$" required oninvalid="this.setCustomValidity(\'6~20字母数字或下划线\');" oninput="setCustomValidity(\'\')" onchange="checkPassword()"> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>确认密码</div> <div> <input type="password" placeholder="确认密码" required onchange="checkPassword()"> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>身份证号</div> <div> <input type="text" placeholder="输入身份证号" required pattern="^([0-9]){18}(x|X)?$" oninvalid="this.setCustomValidity(\'请输入合法的身份证号\');" oninput="setCustomValidity(\'\')"> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>开户银行</div> <div> <select required> <option value="">==请选择==</option> <option value="1">中国银行</option> <option value="2">中国工商银行</option> <option value="3">中国农业银行</option> <option value="5">中国邮政储蓄银行</option> <option value="6">交通银行</option> <option value="7">招商银行</option> </select> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>开户支行</div> <div> <input type="text" placeholder="开户支行" required> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>开户名</div> <div> <input type="text" placeholder="开户名" required> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>银行账号</div> <div> <input type="text" placeholder="银行账号" required> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>省</div> <div> <select required> <option value="">==请选择==</option> <volist> <option value="{sh:$key}">{sh:$vo}</option> </volist> <option>江苏省</option> </select> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>市</div> <div> <select required> <option value="">==请选择==</option> <option>宿迁市</option> </select> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>县/区</div> <div> <select required> <option value="">==请选择==</option> <option>宿城区</option> </select> </div> </div> </div> </li> <li> <div> <div><i></i></div> <div> <div>街道地址</div> <div> <textarea placeholder="收货详细地址" required></textarea> </div> </div> </div> </li> </ul> </div> <div> <div> <div><a href="{sh::U(\'Store/OpenStore/index\')}">取消</a></div> <div><input type="submit" value="提交"></div> </div> </div> </form> </div> <script src="http://www.likecs.com/{sh::PUB}js/jquery-2.1.0.min.js" type="text/javascript"></script> <script src="http://www.likecs.com/{sh::PUB}plugin/layer/layer.js" type="text/javascript"></script> <script type="text/javascript"> function checkPassword() { var pass1 = document.getElementById("Password"); var pass2 = document.getElementById("Repassword"); if (pass1.value != pass2.value) pass2.setCustomValidity("两次输入的密码不匹配"); else pass2.setCustomValidity(""); } // 验证表单 function checkForm() { // ajax检测账号是否已存在 return false; } </script> </body> </html>