Cara menggunakan Layui untuk melaksanakan fungsi pengesahan borang bahagian hadapan

Cara menggunakan Layui untuk melaksanakan fungsi pengesahan borang bahagian hadapan

Pengenalan:
Dalam pembangunan bahagian hadapan, pengesahan borang ialah fungsi penting. Dengan mengesahkan data yang dimasukkan oleh pengguna, pengalaman pengguna dan ketepatan data boleh dipertingkatkan dengan berkesan. Layui ialah rangka kerja UI bahagian hadapan yang ringan yang menyediakan komponen pengesahan borang yang ringkas dan mudah digunakan, dengan banyak mengurangkan beban kerja pembangun. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi pengesahan borang bahagian hadapan dan memberikan contoh kod khusus.

1. Penggunaan asas pengesahan borang Layui

1. Memperkenalkan Layui:
   Mula-mula memperkenalkan fail berkaitan rangka kerja Layui ke dalam halaman, termasuk layui.css dan layui.js.

<link rel="stylesheet" href="path/to/layui.css">
<script src="path/to/layui.js"></script>

2. Buat borang:
   Buat borang dalam HTML dan tambah kelas yang sepadan dengan elemen borang yang perlu disahkan, seperti lay-verify dan lay-requried kod> tunggu. <code>lay-verify和lay-requried等。

<form class="layui-form" lay-filter="formDemo">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

3. 初始化验证：
   在页面加载完成后，使用Layui的form.render()

layui.use('form', function(){
  var form = layui.form;
  
  //自定义验证规则
  form.verify({
    username: function(value){
      if(value.length < 5){
        return '用户名长度不能少于5个字符';
      }
    },
    password: [/^[S]{6,12}$/,'密码必须6到12位，且不能出现空格']
  });
  
  //监听提交
  form.on('submit(demo)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
});

Pengesahan permulaan:

Selepas halaman dimuatkan, gunakan kaedah form.render() Layui untuk memulakan borang, iaitu, untuk mengesahkan borang. Contoh pengesahan borang biasa tindakan:

1. <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">

3. Sesuaikan gaya gesaan pengesahan

Selain gaya gesaan pengesahan lalai yang disediakan oleh Layui, kami juga boleh menyesuaikan gaya gesaan pengesahan. Dengan mengubah suai gaya nama kelas yang berkaitan dalam fail CSS Layui, anda boleh mencapai kesan segera pengesahan tersuai.

<input type="text" name="username" lay-verify="minLength|maxLength" placeholder="请输入用户名" autocomplete="off" class="layui-input">

2. Kesimpulan:
Dengan komponen pengesahan borang yang disediakan oleh Layui, kami boleh melaksanakan fungsi pengesahan borang bahagian hadapan dengan cepat dan memenuhi keperluan projek yang berbeza dengan menyesuaikan peraturan dan gaya pengesahan. Komponen pengesahan bentuk Layui mudah digunakan, mempunyai kebolehskalaan dan keserasian yang baik, dan merupakan bahagian yang amat diperlukan dalam pembangunan bahagian hadapan.

Rujukan:

Layui laman web rasmi: https://www.layui.com/doc/modules/form.html

4. Layui contoh pengesahan borang: https://www.layui.com/demo/form/verify .html

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi pengesahan borang bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!