Layui를 사용하여 프런트 엔드 양식 확인 기능을 구현하는 방법

Layui를 사용하여 프런트엔드 양식 검증 기능을 구현하는 방법

소개:
프론트엔드 개발에서 양식 검증은 필수적인 기능입니다. 사용자가 입력한 데이터의 유효성을 검사하면 사용자 경험과 데이터 정확성이 효과적으로 향상될 수 있습니다. Layui는 간단하고 사용하기 쉬운 양식 유효성 검사 구성 요소를 제공하여 개발자의 작업량을 크게 줄여주는 경량 프런트 엔드 UI 프레임워크입니다. 이 기사에서는 Layui를 사용하여 프런트 엔드 양식 유효성 검사 기능을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다.

1. Layui 양식 검증의 기본 사용

1. Layui 소개:
   먼저layui.css 및layui.js를 포함하여 Layui 프레임워크의 관련 파일을 페이지에 소개합니다.

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

2. 양식 만들기:
   HTML로 양식을 만들고 lay-verify 및 lay-requriedlay-requried와 같이 확인해야 하는 양식 요소에 해당 클래스를 추가합니다. 코드> 잠깐만요. 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;
  });
});

초기화 확인:

페이지가 로드된 후 Layui의 form.render() 메소드를 사용하여 양식을 초기화, 즉 양식을 확인합니다.

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

2. 일반적인 양식 확인 예

2. 필수 필드 확인:

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

3. 길이 제한 확인:

layui.use('form', function(){
  var form = layui.form;
  
  form.verify({
    username: function(value){
      if(value.length < 5){
        return '用户名长度不能少于5个字符';
      }
    }
  });
});

4. 사용자 지정 확인 규칙:

layui.use('form', function(){
  var form = layui.form;
  
  form.verify({
    password: [/^[S]{6,12}$/,'密码必须6到12位，且不能出现空格']
  });
});

복잡한 비밀번호 확인:

레에에
3. 확인 메시지 스타일을 맞춤설정하세요

Layui에서 제공하는 기본 확인 메시지 스타일 외에도 확인 메시지 스타일을 맞춤 설정할 수도 있습니다. Layui의 CSS 파일에서 해당 클래스 이름의 스타일을 수정하면 맞춤형 확인 메시지 효과를 얻을 수 있습니다.

.layui-form-item .layui-input-inline .layui-form-mid{
  height: 24px;
  line-height: 24px;
  padding-left: 4px;
  color: #393D49;
}

.layui-form-item .layui-input-inline .layui-form-label::before{
  width: 0;
}

결론:

Layui에서 제공하는 양식 유효성 검사 구성 요소를 사용하면 프런트 엔드 양식 유효성 검사 기능을 신속하게 구현하고 유효성 검사 규칙 및 스타일을 사용자 정의하여 다양한 프로젝트의 요구 사항을 충족할 수 있습니다. Layui의 폼 검증 컴포넌트는 사용이 간편하고 확장성과 호환성이 뛰어나 프론트엔드 개발에 없어서는 안 될 부분입니다.
1. 참고자료:

Layui 공식 홈페이지: https://www.layui.com/doc/modules/form.html🎜🎜Layui 양식 검증 예시: https://www.layui.com/demo/form/verify .html🎜🎜

위 내용은 Layui를 사용하여 프런트 엔드 양식 확인 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!