weui 表单验证

 

1.引入库

代码如下（示例）：

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.css">
    
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>

2.html

代码如下（示例）：

<form id="myform" class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="school" class="weui-label">手机号</label></div>
            <div class="weui-cell__bd">
                <input type="tel" placeholder="输入手机号" emptyTips="请输入手机号" notMatchTips="请输入正确的手机号" required pattern="REG_TEL">
            </div>
        </div>
        <div class="weui-btn-area">
            <a id="btn" class="weui-btn weui-btn_primary">验证</a>
        </div>
    </form>

3.js

代码如下（示例）：

       var regexp = {
            regexp: {
                TEL: /^[1][3,4,5,7,8][0-9]{9}$/
            }
        }
        
        weui.form.checkIfBlur('#myform',regexp);
        //点击按钮时验证
        $('#btn').click(function () {  
            weui.form.validate('#myform', function (error) {
                if (!error) {
                    //提交表单
                }
            },  regexp);
        });

总结

使用jquery-weui,首先需要引入需要的css和js文件，其次在input标签上加上required|pattern,错误信息提示内容：emptyTips|notMatchTips