正文

新手必看！盘点5款实用高效的Web表单开发框架及实战技巧

/0 浏览量
0330

在Web开发领域，表单是用户与网站互动的重要方式。一个设计合理、易于使用的表单可以提高用户体验，降低用户流失率。而对于开发者来说，选择合适的框架来构建表单可以大大提高开发效率和项目质量。以下是5款实用高效的Web表单开发框架，以及一些实战技巧，适合新手学习和参考。

1. Bootstrap

Bootstrap是一个流行的前端框架，它提供了丰富的组件和工具，可以帮助开发者快速构建响应式布局和表单。以下是使用Bootstrap开发表单的一些技巧：

1.1 基础表单

<form>
  <div class="form-group">
    <label for="inputEmail">邮箱</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="inputPassword">密码</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

1.2 表单验证

Bootstrap提供了内置的表单验证功能，可以通过JavaScript插件来实现。

$(document).ready(function() {
  $('#loginForm').validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      email: {
        required: "请输入邮箱",
        email: "请输入有效的邮箱地址"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能少于6位"
      }
    }
  });
});

2. jQuery EasyUI

jQuery EasyUI是一个基于jQuery的UI框架，它提供了丰富的表单组件和易用的API，可以快速构建各种风格的表单。

2.1 基础表单

<form id="myForm">
  <div>
    <label>用户名：</label>
    <input type="text" name="username" class="easyui-validatebox" required="true"/>
  </div>
  <div>
    <label>密码：</label>
    <input type="password" name="password" class="easyui-validatebox" required="true" />
  </div>
  <button type="submit" class="easyui-linkbutton" iconcls="icon-ok">提交</button>
</form>

2.2 表单验证

$('#myForm').form({
  onSubmit: function() {
    return $(this).form('validate');
  }
});

3. Vue.js

Vue.js是一个渐进式JavaScript框架，它允许开发者通过声明式的方式来构建用户界面。以下是一个使用Vue.js开发表单的例子：

3.1 基础表单

<template>
  <div>
    <form>
      <div>
        <label for="username">用户名：</label>
        <input v-model="username" id="username" required>
      </div>
      <div>
        <label for="password">密码：</label>
        <input v-model="password" type="password" id="password" required>
      </div>
      <button type="submit" @click.prevent="submitForm">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      alert(`用户名：${this.username}，密码：${this.password}`);
    }
  }
};
</script>

3.2 表单验证

Vue.js提供了第三方库VeeValidate来实现表单验证。

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">用户名：</label>
        <input v-model="username" id="username" :class="{'is-invalid': username && !usernameValid}" required>
        <span v-if="username && !usernameValid" class="invalid-feedback">用户名不能为空</span>
      </div>
      <div>
        <label for="password">密码：</label>
        <input v-model="password" type="password" id="password" :class="{'is-invalid': password && !passwordValid}" required>
        <span v-if="password && !passwordValid" class="invalid-feedback">密码长度不能少于6位</span>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { required, minLength } from 'vee-validate/dist/rules';
import { extend } from 'vee-validate';

extend('required', {
  ...required,
  message: '字段不能为空'
});

extend('minLength', {
  ...minLength,
  message: '字段长度不能少于{length}位'
});

export default {
  data() {
    return {
      username: '',
      password: '',
      usernameValid: true,
      passwordValid: true
    };
  },
  methods: {
    submitForm() {
      this.usernameValid = this.username.length > 0;
      this.passwordValid = this.password.length >= 6;
      if (this.usernameValid && this.passwordValid) {
        alert(`用户名：${this.username}，密码：${this.password}`);
      }
    }
  }
};
</script>

4. React

React是一个用于构建用户界面的JavaScript库，它通过组件化的方式来构建表单。

4.1 基础表单

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`用户名：${username}，密码：${password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label>密码：</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default LoginForm;

4.2 表单验证

React表单验证可以使用Formik库来实现。

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const LoginForm = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
      password: '',
    },
    validationSchema: Yup.object({
      username: Yup.string()
        .required('用户名不能为空'),
      password: Yup.string()
        .required('密码不能为空')
        .min(6, '密码长度不能少于6位'),
    }),
    onSubmit: values => {
      console.log('提交数据', values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          id="username"
          name="username"
          type="text"
          value={formik.values.username}
          onChange={formik.handleChange}
        />
        {formik.errors.username && formik.touched.username && <div>{formik.errors.username}</div>}
      </div>
      <div>
        <label>密码：</label>
        <input
          id="password"
          name="password"
          type="password"
          value={formik.values.password}
          onChange={formik.handleChange}
        />
        {formik.errors.password && formik.touched.password && <div>{formik.errors.password}</div>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default LoginForm;

5. Angular

Angular是一个由Google维护的开源Web应用框架，它提供了强大的表单处理能力。

5.1 基础表单

<form #loginForm="ngForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" ngModel name="username" #username="ngModel" required>
    <div *ngIf="username.invalid && (username.dirty || loginForm.submitted)">
      用户名不能为空
    </div>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" ngModel name="password" #password="ngModel" required>
    <div *ngIf="password.invalid && (password.dirty || loginForm.submitted)">
      密码不能为空
    </div>
  </div>
  <button type="submit" [disabled]="!loginForm.valid">提交</button>
</form>

5.2 表单验证

Angular提供了内置的表单验证功能，可以通过模板表达式和类属性来实现。

export class LoginFormComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log(`用户名：${this.username}, 密码：${this.password}`);
  }

  get username(): string {
    return this.loginForm.get('username').value;
  }

  get password(): string {
    return this.loginForm.get('password').value;
  }

  loginForm = new FormGroup({
    username: new FormControl('', [Validators.required]),
    password: new FormControl('', [Validators.required])
  });
}

以上是5款实用高效的Web表单开发框架及其实战技巧的介绍。在实际开发过程中，可以根据项目需求和个人喜好选择合适的框架进行开发。希望这些信息能够帮助你更好地学习Web表单开发。

-- 展开阅读全文 --