node-sexy-form 友好的表单验证
友好的表单验证
<br/>
用户跟服务端交互,往往是通过表单. 而客户端提交的数据是不可信的. 于是,这样的代码出现了:
if(undefined !== req.body.data.name && 0 != req.body.data.name.length ){
var name = util.escapeHTML(req.body.data.name);
name = tuil.trim(name);
}else{
return res.json({success : false , msg : '名称不能为空' });
}
if(util.isNumeric(req.body.data.sex)){
var sex = Number(req.body.data.sex);
}else{
return res.json({success : false , msg : '性别数据异常' });
}
if(util.isEmail(req.body.data.email)){
//....
}else{
return res.json({success : false , msg : '邮箱格式错误' });
}
//....
是不是很不sexy , 于是 , sexy-form 来了:
var Form = require('sexy-form');
var form = new Form();
form.add('text',{
name : 'name' ,
label : '姓名' ,
validators : ['isString' , 'notEmpty'] ,
filters : ['trim' , 'escapeHTML' , 'toUpperCase']
}).add('select' , {
name : 'sex' ,
label : '性别' ,
data : [
{ value : 1 , label : '男' } ,
{ value : 2 , label : '女' } ,
{ value : 3 , label : '保密' }
]
}).add('text' , {
name : 'email' ,
label : '邮箱' ,
validators : ['isEmail'] ,
filters : ['trim']
});
//验证失败的处理, 注意,如果有多个表单元素验证失败,会执行多次
form.on('validateError',function(e , msg){
return res.json({success : false , msg : e.label + msg });
});
form.setValues(req.body.data).validate(function(value){
//验证通过,返回经过过滤的值
console.log(value);
});
sexy多了吧,而且,表单的定义还可以传给view. 客户端只需要扩展下 sexy-form , 加上构造表单dom的能力,客户端的实时验证也实现了(后续功能)
res.render('admin/index' , {form : form.getConfig() });
项目地址: https://github.com/vfasky/node-sexy-form
默认支持的验证规则:
- isEmail
- isNumber
- isUrl
- notEmpty
默认支持的滤规则
- trim
- toLowerCase
- toUpperCase
- escapeHTML
- toNumber
示例:
var Form = require('sexy-form');
var form = new Form();
添加自定义过滤规则
form.addFilter('test' , function(str){
return 'Hello' + str;
});
添加自定验证规则
form.addValidator('test' , function(str){
if(str === 'xx[@mail](/user/mail).com') return { success : true };
return {
success : false ,
msg : '我说你错,你就是错'
};
})
构造表单结构
form.add('text' , {
name : 'name' ,
label : '姓名' ,
validators : ['isString'] ,
filters : ['trim' , 'escapeHTML' , 'toUpperCase' , 'test']
}).add('text' , {
name : 'email' ,
label : '邮箱' ,
validators : ['isEmail' , 'test'] ,
filters : ['trim']
}).add('select' , {
name : 'sex' ,
label : '性别' ,
data : [
{ value : 1 , label : '男' } ,
{ value : 2 , label : '女' } ,
{ value : 3 , label : '保密' }
]
}).add('radio' , {
name : 'degree' ,
label : '学历' ,
data : [
{ value : 1 , label : '大专' } ,
{ value : 2 , label : '本科' }
]
}).add('checkbox' , {
name : 'hobby' ,
label : '爱好' ,
data : [
{ value : 1 , label : '篮球' } ,
{ value : 2 , label : '足球' }
]
}).add('hidden' , {
name : 'id' ,
filters : ['toNumber']
});
console.log( form.getConfig() );
测试过滤
form.setValues({
name : '<div>test</div>' ,
email : 'xx[@mail](/user/mail).com' ,
sex : 1 ,
degree : 1 ,
hobby : 2 ,
id : 'ddd'
}).validate(function(value){
//验证通过,返回经过过滤的值
console.log(value);
});
测试验证
form.setValues({
name : '<div>test</div>' ,
email : 'sdfdsff[@dd](/user/dd).com' ,
sex : 1 ,
degree : 1 ,
hobby : 2 ,
id : 'ddd'
});
错误回调
form.on('validateError',function(e , msg){
console.log(e.label + '发生错误,信息:' + msg);
});
执行验证
form.validate();