layui表单元素怎么校验-猿码集

什么是layui表单元素校验

在前端开发中，表单元素的校验是必不可少的。校验可以确保用户输入的数据格式正确，并提供给用户友好的提示信息，从而提高用户体验。layui是一个基于jQuery的前端UI框架，提供了丰富的表单元素校验功能。本文将介绍layui表单元素校验的基本用法和常见的校验方法。

layui表单元素基本使用方法

使用layui表单元素校验，可以通过在表单元素的HTML标签中添加lay-verify属性，并设置校验规则。具体用法如下：

<input type="text" name="username" lay-verify="required" placeholder="请输入用户名">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码">

上面的代码中，分别为username输入框和password输入框添加了lay-verify属性，并设置为required。这个属性告诉layui这个输入框需要进行校验，而required则表示这个输入框不能为空。

在HTML中设置好校验规则之后，还需要在JavaScript中初始化layui表单模块，并进行相应的表单监听。layui表单的初始化和监听代码如下：

layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

上面的代码中，我们首先引入了layui表单模块（需要先引入layui.js和layui.css），然后调用layui.use()方法进行初始化。在初始化之后，我们使用form.on()方法对表单进行监听。该方法第一个参数为监听的事件类型，如submit（提交按钮）、checkbox（选择框）、switch（开关）等，第二个参数为回调函数，回调函数接收一个参数data，用于获取输入框中的值。在回调函数中，我们可以对表单的提交进行处理。

常见的校验方法

1. required（必填项）

required表示输入框不能为空。如果用户没有填写内容，将会提示“不能为空”。

<input type="text" name="username" lay-verify="required" placeholder="请输入用户名">

2. phone（手机号码）

phone表示输入框需要输入正确的手机号码。如果用户输入的手机号码格式不正确，将会提示“请输入正确的手机号码”。

<input type="text" name="phone" lay-verify="phone" placeholder="请输入手机号码">

3. email（电子邮箱）

email表示输入框需要输入正确的电子邮箱地址。如果用户输入的地址格式不正确，将会提示“请输入正确的电子邮箱地址”。

<input type="text" name="email" lay-verify="email" placeholder="请输入电子邮箱地址">

4. url（网址）

url表示输入框需要输入正确的网址格式。如果用户输入的网址格式不正确，将会提示“请输入正确的网址格式”。

<input type="text" name="url" lay-verify="url" placeholder="请输入网址">

5. number（数字）

number表示输入框需要输入数字类型的内容。如果用户输入的内容不是数字，将会提示“只能输入数字”。

<input type="text" name="age" lay-verify="number" placeholder="请输入年龄">

6. identity（身份证号码）

identity表示输入框需要输入正确的身份证号码。如果用户输入的身份证号码格式不正确，将会提示“请输入正确的身份证号码”。

<input type="text" name="idnumber" lay-verify="identity" placeholder="请输入身份证号码">

7. password（密码）

password表示输入框需要输入长度为6-16位的密码。如果用户输入的密码长度不在6-16位之间，将会提示“密码长度为6-16位”。

<input type="password" name="password" lay-verify="password" placeholder="请输入密码">

8. equalTo（确认密码）

equalTo用于确认密码。需要将需要进行确认的输入框的lay-verify属性设置为equalTo，并将equalTo的属性值设置为需要进行确认的输入框的name值。

<input type="password" name="password" lay-verify="required" placeholder="请输入密码">
<input type="password" name="repassword" lay-verify="equalTo|password" placeholder="请再次输入密码">

上面的代码中，repassword输入框的验证规则是equalTo|password，表示需要与name为password的输入框进行比较。如果不相同，将会提示“两次输入的密码不一致”。

自定义错误提示

在layui表单校验中，可以通过data-text属性自定义提示信息。例如：

<input type="text" name="age" lay-verify="number" placeholder="请输入年龄" data-text="年龄只能是数字">

上面的代码中，我们在age输入框的HTML标签中添加了data-text属性，用于自定义错误提示信息。如果用户输入的内容不是数字，将会提示“年龄只能是数字”。

总结

layui表单元素校验使得我们可以方便地对用户输入的内容进行校验，并提供友好的提示信息。本文介绍了layui表单元素校验的基本用法和常见的校验方法，以及如何自定义错误提示。

layui表单元素怎么校验