微信小程序 - 检测表单是否为空

微信小程序- form组件 - 检测表单是否为空

文章内容：
本文记录微信小程序开发中，一键检测表单内容是否为空，即检测表单存在漏填选项，
如果存在，阻止提交，并自动给出准确提示
如果不存在，即表单完整没有漏填，则提交表单到服务器进行业务处理。
适用于：通用的表格，结构不太复杂的表格

文章适用于一些表单结构稍简单的项目，
如果对你有帮助就留个小脚印吧~

正文：

1. 创建js工具文件

在目录树中，右键utils文件，新建名为formUtil.js的文件，文件内容为：

/**
 * 检测表单中的空内容并提示给用户端。（适用于大多数简单的表单）
 * # 仅可用于检测表单是否存在空填内容
 * 
 * 参数 e:  e = 点击提交按钮返回的参数的e.detail.value
 * 返回结果，如果通过验证，则返回true 执行后续步骤
 * 反之，若未通过验证，则返回false,并自动给出用户提示i
 * ---------------------------------------------------
 * 
 * # 调用指引 #
 * const formUtil = require(../../utils/formUtil.js) // 声明在page({})之外顶端
 * 
 * formSubmit(e){
 *    var checkRes = formUtil.checkNullForm(e);
 *    if (!checkRes ) {
 *      console.log("表单存在漏填，已给出提示，并终止表单提交操作")
 *    	return;
 *    }
 *    console.log("表单通过验证，开始执行操作")
 *    // 提交表单到服务器的业务代码
 *    // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 * }
**/
function checkNullForm(e){
	console.log("已传入参数（如下），开始执行检测...",e)
	var formData = e.detail.value   // 声明变量，值为表单内容
	var hint = "";    // 声明提示语
	
	// 循环遍历表单内容
	for (var item in formData) {
		// 打桩 - 查看表单信息
		console.log(item, "：", e.detail.value[item])
		// 跳出选填选项选填选项
		if (item == 'addr_desc'){	// 将选填选项放入括号内
			continue;
		}
		// 如下 ，根据自己表单的结构来增删提示语注意，indexOf中全部是小写
		if (e.detail.value[item] == "" | e.detail.value[item] == 'undefined') {
			// 根据提示语给出提示
			item.replace(-,'')
			item.replace(_,'')
			item.toLowerCase()
			if (item.indexOf("nickname") >= 0) {
				hint = "请填写昵称";
				console.log(hint);
			} else if (item.indexOf("username") >= 0) {
				hint = "请填写用户名";
			} else if (item.indexOf("name") >= 0) {
				hint = "请填写姓名";
			} else if (item.indexOf("address") >= 0) {
				hint = "请选择地址";
			} else if (item.indexOf("data") >= 0) {
				hint = "请填写日期";
			} else if (item.indexOf("starttime") >= 0) {
				hint = "请选择起始时间";
			} else if (item.indexOf("endtime") >= 0) {
				hint = "请选择结束时间";
			} else if (item.indexOf("price") >= 0) {
				hint = "请设置餐品的单价";
			} else if (item.indexOf("phone") >= 0) {
				hint = "请填写商家的电话";
			} else if (item.indexOf("") >= 0) {
				hint = "请填写";
			} else if (item === 'taste1Num' | item === 'taste2Num' | item === 'taste3Num' | item === 'taste4Num' ) {
				hint = "请设置每个口味的数量";   // 生成提示语
			} else {
				hint = "请填写" + item;   // 生成提示语
			}
			break;  // 跳出循环
		}
	}
	// 判断，如果存在提示语，则提示用户端，存在漏填选项
	if (hint !== "") {
		wx.showModal({
		content: hint,
		showCancel: false,
		confirmText: '确定',
		confirmColor: '#000000',
		})
		return false; // 未通过验证,返回false
	} else {  
		// 反之，表单填写正常，返回true，执行后续操作
		return true;  // 通过验证，返回true
		console.log("通过检测，执行业务...")
	}
}

module.exports = {
	checkNullForm: checkNullForm

}

2. 调用工具类，进行表单检测

<!-- index.xml -->
	<!--  小白注意！！！  返回参数中没有表单信息，可能是如下属性出错。
		form标签中，必须是bindsubmit 而不是 bindtap
		button标签中 是form-type
	 --> 
    <form bindsubmit='formSubmit'  >
        <view class='item'>
        	<label>username</label><input name='username'  ></input>
        	<label>password</label><input name='password'></input>
        	<label>email</label><input name='email'></input>
        	<label>signature</label><input name='signature'></input>
        	<button form-type='submit' >submit</button>
        </view>
      
    </form>

/* index.js */
const formUtil = require('../../utils/formUtil.js')
page({
	xxxxxxx(){
	},
	formSubmit(e){
    	var checkRes = formUtil.checkNullForm(e);
	    console.log("调用工具结果：", checkRes)
	
	    if (!checkRes){
	      console.log("表单存在异常，终止提交！")
	      return;
    	} 

	    // 执行业务 - 以下为表单通过检测后执行的代码
	    console.log("通过检测，执行业务...")	
	    // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
	    wx.request......
  },
})