锋言锋语

NferZhuang的自留地

html5表单验证–多个输入框至少输入一个

前言

在一个项目中,有如下的表单输入框:

%e5%a4%9a%e4%b8%aa%e8%be%93%e5%85%a5%e6%a1%86%e8%87%b3%e5%b0%91%e8%be%93%e5%85%a5%e4%b8%80%e4%b8%aa

其中“联系方式”一栏包含三个输入框:手机号、QQ号、电子邮箱,三者并不是都要求必须输入,但是至少也要保证有一个输入,那么如何使用html5的表单验证来进行约束呢?

注意:这里我并不想引入jQuery Validate插件来实现相应的功能,毕竟插件的默认验证信息显示效果和html5原生的效果差异很大。

%e8%a1%a8%e5%8d%95%e9%aa%8c%e8%af%81%e5%af%b9%e6%af%94

html5表单验证语法

最基本的required验证

<form>
  Username: <input type="text" name="username" required>
  <input type="submit">
</form>

上述代码就是一个最基本的demo,如果没有输入任何内容,点击提交的时候就会显示“请填写此字段。”的提示信息。

支持pattern的表单验证

<form>
Password: <input type="password" name="password" required pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>

上述代码是增加了pattern的表单验证代码,如果用户没有输入的话,则会先通过required关键字进行验证,如果输入的不匹配pattern字段的话,则显示下述的错误提示:

%e6%94%af%e6%8c%81pattern%e7%9a%84%e8%a1%a8%e5%8d%95%e9%aa%8c%e8%af%81

可以看到,当输入不满足pattern格式时,提示信息发生了变化,并且把title字段显示出来给出输入的格式要求。

使用setCustomValidity定制表单验证错误提示

The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

在MDN上我们找到了setCustomValidity()函数的说明,下面就是一个使用该函数进行表单验证信息定制的例子:

    <form>
        <input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="请输入代码" >
        <button type="submit">Check</button>
    </form>
<script type="text/javascript">
function out(i){
    var v = i.validity;
    if(true === v.valueMessing){
        i.setCustomValidity("请填写些字段");
    }else{
        if(true === v.patternMismatch){
            i.setCustomValidity("请输入4位数字的代码");
        }else{
            i.setCustomValidity("");
        }
    }
}
</script>

注:代码来自于财付通文章:HTML5应用:setCustomValidity(message)接口

运行上述代码可以看到当输入不满足pattern的时候可以自定义错误信息,注意需要根据用户的输入来实时更新自定义错误信息的内容。

多个输入框至少输入一个

上面的例子都是针对单独的input控件的,那么如何组合验证多个输入框至少输入一个呢?

我的解决思路如下:

  1. 先对每一个输入框都添加required关键字约束
  2. 判断只要有一个输入框不为空,则去掉required关键字约束并设置自定义错误信息为空
  3. 如果所有输入框都为空,则添加required关键字约束并设置自定义错误提示信息
  4. 注意,在dom加载完成后以及输入框发生输入后都进行一次检测

完整的代码如下:

    <form>
		<div class="customer_contact">
			<label>联系方式:</label>
			<input type="text" name="customer_mobile" placeholder="手机号"  required>
			<input type="text" name="customer_qq" placeholder="QQ" required>
			<input type="text" name="customer_email" placeholder="邮箱"  required>
		</div>
        <button type="submit">Check</button>
    </form>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
    checkContact();
});

$('.customer_contact input').bind('input', function(e) {
	checkContact();
});

function checkContact() {
	var $mobile = $("input[name='customer_mobile']");
	var $qq = $("input[name='customer_qq']");
	var $email = $("input[name='customer_email']");
	var customValidity = "";

	if ($mobile.val() || $qq.val() || $email.val()) {
		$mobile.removeAttr("required");
		$qq.removeAttr("required");
		$email.removeAttr("required");
		customValidity = "";
	} else {
		$mobile.attr("required", "required");
		$qq.attr("required", "required");
		$email.attr("required", "required");
		customValidity = "请至少输入一项联系方式";
	}

	$mobile[0].setCustomValidity(customValidity);
	$qq[0].setCustomValidity(customValidity);
	$email[0].setCustomValidity(customValidity);
}
</script>
文 / nfer
LEAVE A REPLY

loading