表单交互与验证技巧-优快云博客

<script>
var form=document.getElementById("myform");
EventUtil.addHandler(form,"submit",function(event){
var event=EventUtil.getEvent(event); //取得事件对象
EventUtil.preventDefault(event); //阻止这个事件的默认行为就可以取消表单提交（一般来说，当表单数据无效而不能发送给服务器时，
可以使用这一技术）
});
</script>

只要表单中存在以下任意一种按钮，相应控件拥有焦点的情况下，按回车键就可以提交该表单。如果表单里没有提交按钮，按回车键不会提交表单。

<body>
<inputtype="submit"value="form submit"id="myform">
<buttontype="submit"id="myform">form
 submit</button>
</body>

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

form.submit(); //提交表单，无需表单包含提交按钮

<body>
<inputtype="reset"value="form reset"id="myform">
<buttontype="reset"id="myform">form
 reset</button>
</body>

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

form.reset(); //像单击重置按钮一样触发reset事件

<body>
<form 
action=""method="post"id="myform"id="form">
<ul>
<li><inputtype="radio"name="color"value="red">red</li>
<li><inputtype="radio"name="color"value="yellow">yellow</li>
<li><inputtype="radio"name="color"value="blue">blue</li>


</ul>
</form>
</body>
<script>
var form=document.getElementById("myform");
var colorfriend=form.elements["color"]
alert(colorfriend.length);//3
var firstColorFriend=colorfriend[0];
var firstFormFeiend=form.elements[0];
alert(firstColorFriend=firstFormFeiend);//true
</script>

<script>
var form=document.getElementById("myform");
var field=form.elements[0];
field.value="another value";//修改value属性
alert(field.form==form);//true 检查form属性的值
field.type="checkbox"//修改type属性
field.disabled=true;//禁用当前字段
field.focus();//获得焦点
</script>

避免多次提交表单

<script>
var form=document.getElementById("myform");
EventUtil.addHandler(form,"submit",function(event){
var event=EventUtil.getEvent(event);
var btn=target.elements["submit-btn"];//取得提交按钮
btn.disabled=true;//禁用

});

当页面加载完成后，将焦点转移到表单中第一个字段，为此，可以侦听load事件。

<script>
var form=document.getElementById("myform");
EventUtil.addHandler(window,"load",function(){
document.form[0].element[0].focus();

});
</script>

<inputtype="text"autofocus>

<script>
EventUtil.addHandler(window,"load",function(){
var element=document.form[0].element[0];
if(element.autofocus!==true){
element.focus();
console.log("js focus");
}
});
</script>

当前字段失去焦点时触发

document.form[0].element[0].blur();

focus时改变北京颜色，表名字段获得了焦点，利用blue恢复文本框背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。

<script>
var textbox=document.form[0].elements[0];
EventUtil.addHandler(textbox,"focus",function(){
var event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.style.backgroundColor!="red"){
target.style.backgroundColor="yellow";
}else{
target.style.backgroundColor="";
}
});
EventUtil.addHandler(textbox,"blur",function(){
var event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(/[^\d]/.test(target.value)){
target.style.backgroundColor="red";
}else{
target.style.backgroundColor="";
}
});
EventUtil.addHandler(textbox,"change",function(){
var event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(/[^\d]/.test(target.value)){
target.style.backgroundColor="red";
}else{
target.style.backgroundColor="";
}
});
</script>

document.getElementById("name").oninput=
function(e) {
console.log(this.checkValidity())

if(!this.checkValidity()){
this.value =this.value.substring(0,this.value.length-1);
e.preventDefault();
}
}

<body>
<input
type="text"
id="name" 
pattern="\d+">
</body>
<script>
document.getElementById("name").oninput=function(event){
console.log(this.checkValidity());
if(!this.checkValidity()){
this.value.substring(0,this.value.length-1);
event.preventDefault();
}

};
</script>

添加项

<body>
<form 
action="http://www.baidu.com">
<select
name="" 
id="selectid" 
name="location">
<option
value="q1">11</option>
<option
value="q2">22</option>
<option
value="q3">33</option>

</select>
</form>
</body>
<script>
var locatio=document.getElementById("selectid");
var newOption=new
Option("44","q4");
locatio.add(newOption,undefined);
</script>

选择选项-单选

<body>
<form 
action="http://www.baidu.com">
<select
name="" 
id="selectid" 
name="location">
<option
value="q1">11</option>
<option
value="q2" 
selected>22</option>
<option
value="q3">33</option>

</select>
</form>
</body>
<script>
var locatio=document.getElementById("selectid");
var selectedIndex=locatio.selectedIndex;
alert(selectedIndex);
var a=locatio.options[selectedIndex];

alert(a.text);
</script>

选择选项-单选、多选

<body>
<form 
action="http://www.baidu.com">
<select
name="" 
id="selectid" 
name="location">
<option
value="q1">11</option>
<option
value="q2">22</option>
<option
value="q3">33</option>

</select>
</form>
</body>
<script>
var textbox=document.getElementById("selectid");
function getSelectedOptions(textbox){
var array1=new
Array();
var Op=null;
for(var
i=0, 
len=textbox.options.length;
i<len; 
i++){
Op=textbox.options[i];
if(Op.selected){
array1.push(Op);
}
}
return array1;
};
var selectedOptions=getSelectedOptions(textbox);
var message="";
for(var
i=0,len=selectedOptions.length;i<len;i++){
message+=selectedOptions[i].index+selectedOptions[i].value+selectedOptions[i].text;
}
alert(message);

</script>

移除选项

<body>
<form 
action="http://www.baidu.com">
<select
name="" 
id="selectid" 
name="location">
<option
value="q1">11</option>
<option
value="q2">22</option>
<option
value="q3">33</option>

</select>
</form>
</body>
<script>
var textbox=document.getElementById("selectid");
textbox.remove(0); //第一种方法：移除第一个选项
textbox.remove(textbox.options[0]);

//第二种方法：移除第一个选项
//移除所有选项

function clearop(textbox){
for(var
i=0,len=textbox.options.length;i<len;i++){
textbox.remove(0);
}
}
</script>