开源软件名称(OpenSource Name):horprogs/Just-validate开源软件地址(OpenSource Url):https://github.com/horprogs/Just-validate开源编程语言(OpenSource Language):TypeScript 61.3%开源软件介绍(OpenSource Introduction):Modern, simple, lightweight (~5kb gzip) form validation library written in Typescript, with no dependencies (no JQuery!). Support a wide range of predefined rules, async, files, dates validation, custom error messages and styles, localization. Supporting writing custom rules and plugins. NOTE This is documentation for JustValidate 2. If you are looking for the old version, you could find it here. Why JustValidate?It's a right choice for you, if you have a site, a landing page without React, JQuery etc. and you want to quick, simple and powerful solution for validating your form. Features
Installationnpmnpm install just-validate --save yarnyarn add just-validate And then use it as an imported module: import JustValidate from 'just-validate';
const validate = new JustValidate('#form'); Or if you don't use module bundlers, just include JustValidate script on your page from CDN and call it as <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<body>
<script>
const validate = new window.JustValidate('#form');
</script>
</body> Predefined rulesThere are plenty of rules which you could use out of the box:
Quick startLet's say we have a basic HTML layout: <form action="#" id="form" autocomplete="off">
<label for="name">Enter your name</label>
<input
type="text"
class="form__input form-control"
placeholder="Enter your name"
autocomplete="off"
name="name"
id="name"
/>
<label for="email">Enter your email</label>
<input
type="email"
class="form__input form-control"
placeholder="Enter your email"
autocomplete="off"
name="email"
id="email"
/>
<button class="btn btn-primary" id="submit-btn">Submit</button>
</form> Next, let's add JustValidate to our layout and define some simple rules. First, we should create the instance Second, we call const validation = new JustValidate('#form');
validation
.addField('#name', [
{
rule: 'minLength',
value: 3,
},
{
rule: 'maxLength',
value: 30,
},
])
.addField('#email', [
{
rule: 'required',
errorMessage: 'Email is required',
},
{
rule: 'email',
errorMessage: 'Email is invalid!',
},
]); And that's it! Now our form is validated! MorePlease, check out the examples and documentation. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论