收集表单字段控件
html:
<!--下拉列表 var x=document.getElementById("mySelect").value;-->
<select name="selectOne">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select><br><br>
<!--输入框-->
<input type="text" name="text1" placeholder="我叫text" required>
<input type="tel" name="tel1" placeholder="我叫tel" >
<input type="email" name="email1" placeholder="我叫email" required><br><br>
<!--复选框-->
<input type="checkbox" name="checkbox1" value="box2" />box1
<input type="checkbox" name="checkbox1" value="box3" required/>box2<br><br>
<!--单选框-->
<input type="radio" name="colors" value="red" required/>红色
<input type="radio" name="colors" value="blue" required/>蓝色
<input type="radio" name="colors" value="green" required/>绿色<br><br>
<input type="submit" name="" value="提交"/>
js代码
function isEmpty(target) {
if(typeof target==="undefined" || target===null || target===""){
return true;
}else if(typeof target==="string"){
return target.trim() ==="";
}else {
return false;
}
}
function pushFormValue(name,value,isRequired,type) {
var _data={},
Mobile = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
Email=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
if( !isEmpty(name) && isRequired && isEmpty(value)){
requiredInfo.push(name);
}
if(!isEmpty(name)&&!isEmpty(value)){
_data.name=name;
_data.value=$.trim(value);
_data.formType=type;
if(type=="tel"){
if(!Mobile.test(_data.value)){
checkInfo.push("手机号码格式不对");
}
}
if(type=="email"){
if(!Email.test($.trim(_data.value))){
checkInfo.push("邮箱格式不对");
}
}
formData.push(_data);
}
}
function dealMoreNameToSingle(type) {
var returnArr=[],
selector="input[type="+type+"]";
$(selector).map(function (index,_item) {
var formName=$(_item).attr('name'),
isRequired=$(_item).attr('required'),
_newObj={};
if(!isEmpty(formName)){
if(returnArr.length==0){
_newObj={name:formName,isRequired:isRequired};
returnArr.push(_newObj);
}else{
var isExist=false;
for(var i=0;i<returnArr.length;i++){
if(returnArr[i].name==formName){
if(!returnArr[i].isRequired && isRequired){
returnArr[i].isRequired=isRequired;
}
isExist=true;
break;
}
}
if(!isExist){
_newObj={name:formName,isRequired:isRequired};
returnArr.push(_newObj);
}
}
}
});
returnArr.map(function (item,index) {
var formName=item.name,
formNameValue="",
isRequired=item.isRequired,
selector="";
if(type=='checkbox'){
var leastOne=false;
selector="input[name="+formName+"]";
$(selector).map(function (index,_item) {
if($(_item).prop('checked')){
leastOne=true;
formNameValue=$(_item).val();
pushFormValue(formName,formNameValue,isRequired,type);
}
});
if(!leastOne){
pushFormValue(formName,formNameValue,isRequired,type);
}
}else{
selector="input[name="+formName+"]:checked";
formNameValue=$(selector).val();
pushFormValue(formName,formNameValue,isRequired,type);
}
});
}
function dealSingleName(type) {
var selector='';
if(type=="select"){
selector='select';
}else{
selector="input[type="+type+"]";
}
$(selector).map(function (index,_item) {
var formName=$(_item).attr('name'),
formNameValue=$(_item).val(),
isRequired=$(_item).attr('required');
pushFormValue(formName,formNameValue,isRequired,type);
});
}
var formData=[],
requiredInfo=[],
checkInfo=[];
function bindDom() {
$("input[type='submit']").click(function (e) {
e.preventDefault();
formData=[];
requiredInfo=[];
checkInfo=[];
dealSingleName('select');
dealSingleName('text');
dealSingleName('tel');
dealSingleName('email');
dealMoreNameToSingle("checkbox");
dealMoreNameToSingle("radio");
console.log(JSON.stringify(formData));
if(checkInfo.length>0){
alert(checkInfo.toString());
}else if(requiredInfo.length>0){
alert("你还有"+ requiredInfo.length +"个("+requiredInfo.toString()+")必填的输入框没有填写");
}else{
// submitData(formData);
}
});
}
$(function () {
bindDom();
})
效果:
1:对控件的required(必填项)进行验证
2:对电话,邮箱进行验证
3:关键点是利用<input type='xxxx' name="xxx" required/> 中type属性来进行区分验证;