form-validation 示例
formvalidation是一个比较好用的浏览器端验证框架。下面是简单示例。
安装依赖：
pnpm i @form-validation/bundle
pnpm i @form-validation/styles
pnpm i @form-validation/plugin-tachyons
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Special field name - FormValidation</title>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
</head>
<body>
<form id="demoForm" method="post">
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Full name</div>
<div class="fl w-30 mr2">
<input type="text" name="user[firstName]" placeholder="First name"
class="input-reset ba b--black-20 pa2 mb2 db w-100" />
</div>
<div class="fl w-30">
<input type="text" name="user[lastName]" placeholder="Last name"
class="input-reset ba b--black-20 pa2 mb2 db w-100" />
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Username</div>
<div class="fl w-40">
<input type="text" name="user[username]" class="input-reset ba b--black-20 pa2 mb2 db w-100" />
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2">Email address</div>
<div class="fl w-40">
<input type="text" name="user[email]" class="input-reset ba b--black-20 pa2 mb2 db w-100" />
</div>
</div>
</div>
<div class="cf mb2">
<div class="fl w-100">
<div class="fl w-25 pa2"></div>
<div class="fl w-50">
<button type="submit" class="ba b--black-20 bg-blue white ph3 pv2 br2">Submit</button>
</div>
</div>
</div>
</form>
<script type="module" src="./index.js"></script>
</body>
</html>
index.js:
import "font-awesome/css/font-awesome.css";
import "tachyons/css/tachyons.css";
import "@form-validation/styles/lib/styles/index.css";
import * as FormValidation from '@form-validation/bundle/lib/full.js';
import { Tachyons } from '@form-validation/plugin-tachyons';
document.addEventListener('DOMContentLoaded', function (e) {
FormValidation.formValidation(document.getElementById('demoForm'), {
fields: {
'user[firstName]': {
validators: {
notEmpty: {
message: 'The first name is required',
},
},
},
'user[lastName]': {
validators: {
notEmpty: {
message: 'The last name is required',
},
},
},
'user[username]': {
validators: {
notEmpty: {
message: 'The username is required',
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long',
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore',
},
},
},
'user[email]': {
validators: {
notEmpty: {
message: 'The email address is required',
},
emailAddress: {
message: 'The input is not a valid email address',
},
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
tachyons: new Tachyons(), // new FormValidation.plugins.Tachyons(),
submitButton: new FormValidation.plugins.SubmitButton(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),
},
});
});
parcel打包：
parcel build index.html
测试：
python -m http.server 9090 -d dist
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话