h5validator
v2.0.0
Published
**Required**
Readme
H5Validator
Example
Required
<form>
<input name="username" />
</form>
<script>
var form=document.querySelector("form");
var rules={
username:{
required:true,
},
};
new H5Validator(form,rules,function submit(params, form){
console.log(params);
// ajax(url,params);
});
</script> <form>
<div>Radio:</div>
<div>
<label>
<input type="radio" name="r" value="one" />
*Radio one
</label>
</div>
<div>
<label>
<input type="radio" name="r" value="two" required />
*Radio two
</label>
</div>
<div>Checkbox:</div>
<div>
<label>
<input type="checkbox" name="c" value="1" />
Checkbox one
</label>
</div>
<div>
<label>
<input type="checkbox" name="c" value="2" />Checkbox two
</label>
</div>
<div>
</form>
<script>
var form=document.querySelector("form");
var rules={
r:{
require:true,
},
c:{
required:{
message:"Plase check",
},
},
};
new H5Validator(form,rules,function submit(params, form){
console.log(params);
// ajax(url,params);
});
</script>Pattern
<form>
<input name="username" />
</form>
<script>
var form=document.querySelector("form");
var rules={
username:{
required:{
message:"Plase input username",
},
pattern:/^.{4,}$/,
},
};
new H5Validator(form,rules,function submit(params, form){
console.log(params);
// ajax(url,params);
});
</script> <form>
<input name="username" />
</form>
<script>
var form=document.querySelector("form");
var rules={
username:{
required:{
message:"Plase input username",
},
pattern:{
value:/^.{4,}$/,
message:"cannot be less than 4",
},
},
};
new H5Validator(form,rules,function submit(params, form){
console.log(params);
// ajax(url,params);
});
</script>Len
<form>
<input name="username" />
</form>
<script>
var form=document.querySelector("form");
var rules={
username:{
required:{
message:"Plase input username",
},
len:{
type:"GE",
value:4,
},
},
};
new H5Validator(form,rules,function submit(params, form){
console.log(params);
// ajax(url,params);
});
</script>Compare
<form>
<p>
*Password:
<input type="password" name="pwd" />
</p>
<p>
*Verify password:
<input type="password" name="vpwd" />
</p>
</form>
<script>
var form=document.querySelector("form");
var rules={
pwd:{
required:true,
len:{
type:"GE",
value:6,
// message:"error message"
},
},
vpwd:{
required:true,
compare:"pwd",
/**
* compare:{
* value:"pwd",
* message:"error message"
* }
*/
}
};
new H5Validator(form,rules,function submit(params, form){
console.log(params);
// ajax(url,params);
});
</script>Validator
<form>
<p>
Age:
<input type="text" name="age" />
</p>
</form>
<script>
var form=document.querySelector("form");
var rules={
age:{
validator(value){
if(isNaN(value)){
return "error message";
}
},
},
};
new H5Validator(form,rules,function submit(params, form){
console.log(params);
// ajax(url,params);
});
</script>Fomattor
<form>
<p>
Age:
<input type="text" name="age" />
</p>
</form>
<script>
var form=document.querySelector("form");
var rules={
age:{
validator(value){
if(isNaN(value)){
return "error message";
}
},
// string to integer
formatter(value){
if(value){
return parseInt(value,10);
}
return 0;
},
},
};
new H5Validator(form,rules,function submit(params, form){
console.log(params); // {age:18}
// ajax(url,params);
});
</script>addRule & removeRule - 动态添加/删除验证规则
<form>
<input name="username" />
<button id="toggleFieldBtn">切换邮箱字段</button>
<input type="submit" value="提交" />
</form>
<script>
var form=document.querySelector("form");
var validator = new H5Validator(form, {
username: { required: true }
}, function submit(params, form){
console.log(params);
});
// 动态添加/删除字段和验证规则
document.getElementById('toggleFieldBtn').addEventListener('click', function() {
var emailInput = form.querySelector('[name="email"]');
if (emailInput) {
// 删除字段和验证规则
validator.removeRule('email');
emailInput.remove();
} else {
// 创建新字段
emailInput = document.createElement('input');
emailInput.name = 'email';
emailInput.placeholder = '请输入邮箱';
form.appendChild(emailInput);
// 为新字段添加验证规则
validator.addRule('email', {
required: { message: '请输入邮箱' },
pattern: {
value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: '邮箱格式错误'
}
});
}
});
</script>triggerSubmit - 外部触发提交
<form>
<input name="username" required />
</form>
<button id="externalSubmit">外部按钮提交</button>
<script>
var form=document.querySelector("form");
var validator = new H5Validator(form, {
username: { required: { message: '请输入用户名' } }
}, function submit(params, form){
console.log('提交成功:', params);
});
// 外部触发提交
document.getElementById('externalSubmit').addEventListener('click', function() {
var success = validator.triggerSubmit();
if (success) {
console.log('验证通过');
} else {
console.log('验证失败');
}
});
</script>Used
Rules
interface IRules {
[k: string]: {
required?: boolean | {
message: string;
};
pattern?: RegExp | {
value: RegExp;
message: string;
};
len?: number | {
value: number;
type?: "EQ" | "LT" | "GT" | "GE" | "LE" | "NE";
message: string;
};
compare?: string | {
value: string;
message: string;
};
formattor?<T>(value: string): T;
validator?(value: string, form: HTMLFormElement): null | string | undefined;
};
}Constructor
export default class H5Validator {
constructor(
form: HTMLFormElement,
rules: IRules, submit: (params: {
[k: string]: any;
}, form?: HTMLFormElement) => void);
// error css class
className: string;
// default messages
defaultMessages: {
required: string;
selectRequired: string;
len: string;
selectLen: string;
pattern: string;
compare: string;
};
focus: boolean;
preventDefault: boolean;
onlyFirst: boolean; // first or all
showMessage(el: HTMLElement, message: string | null): void;
showMessages(errors: IMesageItem[]): void;
// 动态添加验证规则
addRule(fieldName: string, rule: IRules[string]): void;
// 删除验证规则
removeRule(fieldName: string): void;
// 更新验证规则
updateRule(fieldName: string, rule: IRules[string]): void;
// 验证单个字段
validateField(fieldName: string): string | null;
// 外部触发提交（返回 boolean）
triggerSubmit(): boolean;
}