在表格提交之前,我们通常要对表格内容做非空验证,非空验证包括空值校验和是否连续空格检验
通常的验证方法就是直接给 input输入框 添加 required 属性 这是个 h5 的新属性,浏览器自行进行非空校验
但对于某些不能很好的支持 h5 新属性或者某些需要异步提交的表单。(PS:要注意的是,required属性是针对form表单的,即如果你的输入框不在form表单内,且没有submit按钮,该属性是不起作用的)
对于某些不在form表单内的输入框的值,那么就需要我们自行进行判断了。
在此我写一个简单的校验函数:
html代码:
<input type="text" id="test1" required="required"/>
<input type="button" name="btn" id="btn" value="check" />
js代码:
var val = document.getElementById('test1');
var btn = document.getElementById('btn');
var regu = "^[ ]+$"; //正则匹配一个或多个空格
var re = new RegExp(regu);
btn.addEventListener('click',function(){
var is_null = re.test(val.value);
if(is_null||val.value==''){
console.log('不可为空')
}else{
console.log('OkFine');
}
});
这里我用到正则“^[ ]+$”进行检验 做下简单的解释 ^为起始标记符。$为结束标记符。[ ]为字符匹配条件,当前字符为空,即匹配空格。+为匹配一个或多个[ ]内的字符。