editable string 转_HTML5的form表单验证(提到了contenteditable)

form表单的验证有多种方式，主要有以下几种：浏览器端验证，服务器端验证，浏览器和服务器双重验证，AJAX技术认证。本文主要介绍浏览器端的表单验证。

1、先来看看表单添加的表单验证属性：

autocomplete:  值 on/off, 主流浏览器都支持      效果  输入过一次，再次输入会自动提示，既可用于整个表单也可用于单个表单控件。demo:

  

required：设置表单为必填，IE9及以下不支持，safari不支持  demo:

pattern：正则验证，IE9及以下不支持，safari不支持 demo:

novalidate或formnovalidate：表单中设置了必填，提交时实现不验证。，IE9及以下不支持，safari不支持 demo:

或

2、html5的约束验证API：

(1)、willValidate属性：如果当前控件参与表单验证则本属性为true，否则为false

(2)、validity属性：该属性只带一个FormValidity对象，该对象指出用户对当前控件的输入是否为有效，以及无效时为何无效。

(3)、validationMessage属性：如果控件是有效的或不受验证控制，这个属性为空字符串。否则，这个属性是一个说明为什么无效的本地化字符串。

(4)、checkValidity()方法：如果控件有效(或者它不参与验证)则返回true，否则，返回false,并在对应控件上触发一个invalid事件。

(5)、setCustomValidity(string err)方法：如果err是一个非空字符串，本方法将把该控件标记为无效，并将该字符串作为无效原因向用户显示。如果err是空字符串，之前设置的err字符串将删除，同时该控件将认为是有效的。如果控件被标记为无效，在提交表单时将显示提示信息。

3、validity属性的输出结果：

使用案例：

//setCustomValidity(string err)必须传字符串参数，空字符串也行。

//如果不为空，那么传的字符串在提交表单时显示。

username.oninput = function(){

console.log(username.validity);

if(this.validity.valueMissing){

this.setCustomValidity('不能为空');

}else{

if(this.validity.patternMismatch){

this.setCustomValidity('必须为5个数字');

console.log(this.checkValidity());

}else{

this.setCustomValidity('');

}

}

};

4、与验证有关的css选择器和事件，美化表单

：

(1)、:required和:optional                        必填和选填

(2)、:in-range和:out-of-range                范围内和范围外

(3)、:valid和:invalid                                通过验证和未通过验证

(4)、:read-only和:read-write                  只读和可读可写    设置contenteditable=“true”让元素变为可读写。

(5)、oninput:    input或textarea的值改变时发生的事件

(6)、onchange:    表单控件失去焦点并且值改变时发生

(7)、oninvalid:    表单控件验证不通过

demo:html>

html5表单美化综合案例演示美化案例

.onelist {

margin: 10px 0 5px 12px;

}

.onelist label {

width: 80px;

display: inline-block

}

.onelist input,

.onelist select {

height: 25px;

line-height: 25px;

width: 220px;

border-radius: 3px;

border: 1px solid #e2e2e2;

}

.onelist input[type="submit"] {

width: 150px;

height: 30px;

line-height: 30px;

}

select:required,

input:required,

textarea:required {

background: #fff url(img/star.jpg) no-repeat 99% center;

}

select:required:valid,

input:required:valid,

textarea:required:valid {

background: #fff url(img/right.png) no-repeat 99% center;

box-shadow: 0 0 5px #5cd053;

border-color: #28921f;

}

select:focus:invalid,

input:focus:invalid,

textarea:focus:invalid {

background: #fff url(img/error.png) no-repeat 99% center;

box-shadow: 0 0 5px red;

border-color: red;

outline: red solid 1px;

}

手机号

pattern="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('请输入正确的号码');"

οninput="setCustomValidity('')">

密码

pattern="^[a-zA-Z0-9]\w{5,19}$" required oninvalid="this.setCustomValidity('请输入正确密码');"

οninput="setCustomValidity('')" οnchange="checkPassword()">

确认密码

required οnchange="checkPassword()">

了解方式

==请选择==

搜索引擎

朋友圈

朋友推广

广告投放

function checkPassword() {

var pass1 = document.getElementById("Password");

var pass2 = document.getElementById("Repassword");

if (pass1.value != pass2.value)

pass2.setCustomValidity("两次输入的密码不匹配");

else

pass2.setCustomValidity("");

}

5、修改默认验证气泡：先阻止默认气泡的默认事件，再加入自己的

demo:html>

maximum-scale=1.0">

表单验证默认样式修改

.oneline{line-height: 1.5;margin:10px auto;}

.oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";

display: inline-block;}

.oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}

.oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;

color:#fff;font-size:14px;border-radius: 6px;}

.error-message{color:red; font-size:12px;text-indent:108px;}

用户名:

Email:

function replaceValidationUI(form) {

form.addEventListener("invalid", function(event) {

event.preventDefault();

}, true);//必须设置为true,否则无法捕获事件

form.addEventListener("submit", function(event) {

if (!this.checkValidity()) {

event.preventDefault();

}

}, true);

var submitButton = document.getElementById("thesubmit");

submitButton.addEventListener("click", function(event) {

var inValidityField = form.querySelectorAll(":invalid"),

errorMessage = form.querySelectorAll(".error-message"),

parent;

for (var i = 0; i 

errorMessage[i].parentNode.removeChild(errorMessage[i]);

}

for (var i = 0; i 

parent = inValidityField[i].parentNode;

parent.insertAdjacentHTML("beforeend", "

" + inValidityField[i].validationMessage

+ "

")

}

if (inValidityField.length > 0) {

inValidityField[0].focus();

}

})

}

var form = document.getElementById("forms");

replaceValidationUI(form);

本文为站长原创文章,转载无需和我联系,但请注明来自cuiblog.com