zoukankan      html  css  js  c++  java
  • layui表单验证

    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。

    • required(必填项)
    • phone(手机号)
    • email(邮箱)
    • url(网址)
    • number(数字)
    • date(日期)
    • identity(身份证)
    • 自定义

    同时支持多条规则的验证,格式:lay-verify=”验证A|验证B” 

    如:lay-verify=”required|phone|number”

    完整代码

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>信息</title>
        <!--引入css和js-->
        <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
        <script src="/js/layui/layui.js"></script>
    </head>
    <body>
        <div style=" 800px; margin:0 auto;">
        <form class="layui-form" action="#123" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">反馈说明</label>
                <div class="layui-input-block">
                    <input name="title" class="layui-input" type="text" placeholder="请输入反馈说明" autocomplete="off" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">反馈主题</label>
                <div class="layui-input-block">
                    <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input name="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-block">
                    <input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input name="sex" title="男" type="radio" checked="" value="男">
                    <input name="sex" title="女" type="radio" value="女">
                    <input name="sex" title="保密" type="radio" value="密">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea"  name="contact" lay-verify="contact"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="formDemo" lay-submit>提交</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
        </div>
        <script type="text/javascript">
            layui.use(['form'], function () {
                var form = layui.form;
                //自定义验证规则
                form.verify({
                    title: function (value, item) {
                        if (value.length < 5) {
                            return '标题至少得5个字符啊';
                        }
                    }, fname: function (value) {
                        if (value.length < 4) {
                            return '请输入至少4位的用户名';
                        }
                    }, contact: function (value) {
                        if (value.length < 4) {
                            return '内容请输入至少4个字符';
                        }
                    }
                    , phone: [/^1[3|4|5|7|8]d{9}$/, '手机必须11位,只能是数字!']
                    , email: [/^[a-z0-9._%-]+@([a-z0-9-]+.)+[a-z]{2,4}$|^1[3|4|5|7|8]d{9}$/, '邮箱格式不对']
                });
                //监听提交
                form.on('submit(formDemo)', function(data){
                    //ajax
                    //console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
                    //console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value};获取单个值data.field["title"]
                    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
                });
            });
        </script>
    </body>
    </html>

    官网:https://www.layui.com/doc/modules/form.html

    end

  • 相关阅读:
    Trapping Rain Water
    Construct Binary Tree from Preorder and Inorder Traversal
    Flatten Binary Tree to Linked List
    Permutations II
    Unique Paths II
    Path Sum II
    Unique Binary Search Trees II
    evdev module-----uinput.py
    evdev module-----events.py
    evdev module-----device.py
  • 原文地址:https://www.cnblogs.com/webapi/p/10530067.html
Copyright © 2011-2022 走看看