表单(form)

validate(selector, callback, [options])
表单校验
checkIfBlur(selector, [options])
checkIfBlur 当表单的input失去焦点时校验
showErrorTips(error)
showErrorTips 显示错误提示
hideErrorTips(ele)
hideErrorTips 隐藏错误提示

validate(selector, callback, [options])

表单校验

Kind: global function

Param Type Description
selector string 表单的selector
callback function 校验后的回调
[options] Object 配置项
[options.regexp] object 表单所需的正则表达式

Example

普通input的HTML
<input type="tel" required pattern="[0-9]{11}" placeholder="输入你现在的手机号" emptyTips="请输入手机号" notMatchTips="请输入正确的手机号">
<input type="text" required pattern="REG_IDNUM" placeholder="输入你的身份证号码" emptyTips="请输入身份证号码" notMatchTips="请输入正确的身份证号码">
  • required 表示需要校验
  • pattern 表示校验的正则,不填则进行为空校验。当以REG_开头时,则获取校验时传入的正则。如pattern="REG_IDNUM",则需要在调用相应方法时传入{regexp:{IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/}},详情请看下面checkIfBlurvalidate
  • 报错的wording会从 emptyTips | notMatchTips | tips | placeholder 里获得

 

radio

radio需要检验,只需把参数写在同一表单下,同name的第一个元素即可。

<input type="radio" value="male" name="sex" required tips="请选择性别" />
<input type="radio" value="female" name="sex" />

 

checkbox

checkbox需要校验,只需把参数写在同一表单下,同name的第一个元素即可。 pattern 规定选择个数,用法与正则一致,例如:

<input type="checkbox" name="assistance" value="黄药师" required pattern="{1,2}" tips="请勾选1-2个敲码助手" />
<input type="checkbox" name="assistance" value="欧阳锋" />
<input type="checkbox" name="assistance" value="段智兴" />
<input type="checkbox" name="assistance" value="洪七公" />
  • {1,} 至少选择1个
  • {1,2} 选择1-2个
  • 这里不会出现{0,}这种情况,因为有required就表示必选。否则直接去掉required即可。

 

// weui.form.validate('#form', function(error){ console.log(error);}); // error: {dom:[Object], msg:[String]}
weui.form.validate('#form', function (error) {
    if (!error) {
        var loading = weui.loading('提交中...');
        setTimeout(function () {
            loading.hide();
            weui.toast('提交成功', 3000);
        }, 1500);
    }
    // return true; // 当return true时,不会显示错误
}, {
    regexp: {
        IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
        VCODE: /^.{4}$/
    }
});

checkIfBlur(selector, [options])

checkIfBlur 当表单的input失去焦点时校验

Kind: global function

Param Type Description
selector string 表单的selector
[options] Object 配置项
[options.regexp] object 表单所需的正则表达式

Example

weui.form.checkIfBlur('#form', {
    regexp: {
        IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
        VCODE: /^.{4}$/
    }
});

showErrorTips(error)

showErrorTips 显示错误提示

Kind: global function

Param Type Description
error Object 错误数据
error.ele string 出错了的dom元素
error.msg string 出错了的msg。会根据此msg找到对应的Tips(比如msgempty),那么ele上的emptyTips就会以topTips显示

Example

weui.form.showErrorTips({
    ele: document.getElementById("xxxInput")
    msg: 'empty'
});

hideErrorTips(ele)

hideErrorTips 隐藏错误提示

Kind: global function

Param Type Description
ele Object dom元素

Example

weui.form.hideErrorTips(document.getElementById("xxxInput"));

爱生活,爱技术

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注