html5标准推荐写法,HTML5标准常用的表单写法和使用表单2.0定制错误提示消息内容...

html

用户名：

用户名可以包含数字和字母

密码：

密码长度在6~12位之间

邮箱：

请注意邮箱格式

/**对“用户名”进行输入验证**/

uname.onblur = function(){

if(this.validity.valueMissing){

var msg = '用户名不能为空';

this.nextElementSibling.innerHTML = msg;

this.nextElementSibling.className = 'help-block danger';

this.setCustomValidity(msg);

}else if(this.validity.tooShort){

var msg = '用户名不能短于3位';

this.nextElementSibling.innerHTML = msg;

this.nextElementSibling.className = 'help-block danger';

this.setCustomValidity(msg);

}else if(this.validity.tooLong){

var msg = '用户名不能超过6位';

this.nextElementSibling.innerHTML = msg;

this.nextElementSibling.className = 'help-block danger';

this.setCustomValidity(msg);

}else {

this.nextElementSibling.innerHTML = '用户名验证正确';

this.nextElementSibling.className = 'help-block success';

this.setCustomValidity('');

}

}

css

* {

box-sizing: border-box;

}

.container {

width: 500px;

min-height: 400px;

margin: 100px auto 0 auto;

padding: 1.5em;

border: 1px solid #aaa;

border-radius: 4px;

}

.form-group:not(:last-child) {

margin-bottom: 15px;

}

.control-label {

display: inline-block;

width: 70px;

text-align: right;

vertical-align: middle;

}

.form-control {

padding: 4px;

border: 1px solid #aaa;

border-radius: 2px;

width: 180px;

vertical-align: middle;

}

.help-block {

font-size: 0.8em;

padding: 4px;

border: 1px solid transparent;

border-radius: 2px;

color: #fff;

}

.primary {

background: #bbb;

border-color: #aaa;

}

.danger {

background: #d22;

border-color: #a00;

}

.success {

background: #2b2;

border-color: #0a0;

}