请问哪个表单验证框架比较好呢?

huagushe 2016-05-18 09:48:15
我看了有好多框架,Validation,JQF1。。。不知道哪个比较好啊?
...全文
291 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
#麻辣小龙虾# 2017-07-27
  • 打赏
  • 举报
回复
自己写一个,页面载入定义布尔全局,通过表单focus ,blur事件验证表单,同时改变布尔值,表单提交的时候验证总的布尔值即可。 给个部分代码你自己看下。
$(document).ready(function(){

    //登录验证
    (function(){
        var phoneErrorCapion=$('.login-box-form>p').eq(0);//电话输入错误提示对象
        var pswErrorCapion=$('.login-box-form>p').eq(1);//密码为空错误提示对象
        $('.phone').blur(function(){
            var inputValue=$(this).val();
            var mobile = /^1[3|4|5|7|8]\d{9}$/; //手机正则
            var phoneflag=mobile.test(inputValue);//匹配正则
            if(!phoneflag){
                phoneErrorCapion.text('*请输入正确的手机号码');
                //phoneLogin=false;
            }else{
                phoneErrorCapion.html(' ');
                //phoneLogin=true;
            }
        });
        $('.phone').focus(function(){
            phoneErrorCapion.html(' ');
        });
        $('.password').blur(function(){
            var thisValue=$(this).val();
            if(!thisValue){
                pswErrorCapion.text('*密码不能为空');
                //phoneLogin=false;
            }else{
                pswErrorCapion.html(' ');
                //phoneLogin=true;
            }
        });
        $('.password').focus(function(){
            pswErrorCapion.html(' ');
        });
    })();


    //注册验证
    $(function(){
        var phoneLogin=false;   //提交验证通过全局开关

        //中文姓名验证
        $('.username').blur(function(){
            var thisValue=$(this).val();
            var chinese=/^[\u4E00-\u9FA5]+$/;
            var isCh=chinese.test(thisValue);
            //判断是否是中文
            if(!isCh){
                phoneLogin=false;
                $(this).next('span').text('*请输入中文姓名');
            }else{
                phoneLogin=true;
                $(this).next('span').html(' ')
            }

            //百家姓验证
            var firstName='赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闵席季麻强贾路娄危江童颜郭梅盛林刁钟徐丘骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫经房裘缪干解应宗丁宣贲邓郁单杭洪包诸左石崔吉钮龚程嵇邢滑裴陆荣翁荀羊于惠甄曲家封芮羿储靳汲邴糜松井段富巫乌焦巴弓牧隗山谷车侯宓蓬全郗班仰秋仲伊宫宁仇栾暴甘钭厉戎祖武符刘景詹束龙叶幸司韶郜黎蓟薄印宿白怀蒲邰从鄂索咸籍赖卓蔺屠蒙池乔阴郁胥能苍双闻莘党翟谭贡劳逄姬申扶堵冉宰郦雍郤璩桑桂濮牛寿通边扈燕冀郏浦尚农柴瞿阎充慕连茹习宦艾鱼容向古易慎戈廖庾终暨居衡步都耿满弘匡国文寇广禄阙东欧殳沃利蔚越夔隆师巩厍聂晁勾敖融冷訾辛阚那简饶空曾毋沙乜养鞠须丰巢关蒯相查后荆红游竺权逯盖益桓公万俟司马上官欧阳夏候诸葛闻人东方赫连皇甫尉迟公羊澹台公治宗政濮阳淳于单于太叔申屠公孙仲孙辕轩令狐钟离宇文长孙幕容鲜于闾丘司徒司空丌官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓拔夹谷宰父谷梁晋楚阎法汝鄢涂钦段干百里东郭南门呼延归海羊舌微生岳帅缑亢况后有琴梁丘左丘东门西门商牟佘佴佰赏南官墨哈谯笪年爱阳佟第五言福百家姓终百家姓以外的:万俟司马上官欧阳夏候诸葛闻人东方赫连皇甫尉迟公羊澹台公治宗政濮阳淳于单于太叔申屠公孙仲孙辕轩令狐钟离宇文长孙幕容鲜于闾丘司徒司空丌官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓拔夹谷宰父谷梁晋楚阎法汝鄢涂钦段干百里东郭南门呼延归海羊舌微生岳帅缑亢况后有琴梁丘左丘东门西门商牟佘佴佰赏南官墨哈谯笪年爱阳佟第五言福';
            var nameStr1=$(this).val().substring(0,1);  //获取输入的第一个字
            var nameStr2=$(this).val().substring(0,2);  //获取输入的前两个字
            var hasName=(firstName.indexOf(nameStr1)!=-1)||(firstName.indexOf(nameStr2)!=-1);   //判断是否含有姓氏
            var isNotNull=!($(this).val()=='');
            //判断是否属于百家姓
            if(hasName&&isNotNull){
                phoneLogin=true;
                $(this).next('span').html(' ');
            }else{
                phoneLogin=false;
                $(this).next('span').text('*请输入中文姓名');
            }
        }).focus(function(){
            $(this).next('span').html(' ')
        });

        //手机号码验证
        $('.register-phone').blur(function(){
            var thisValue=$(this).val();
            var isMobile = /^1[3|4|5|7|8]\d{9}$/; //手机正则
            var phoneFlag=isMobile.test(thisValue);
            if(!phoneFlag){     //匹配手机号码
                phoneLogin=false;
                $(this).next('span').text('*请输入11位数手机号码');
            }else{
                phoneLogin=true;
                $(this).next('span').html(' ');
            }
        }).focus(function(){    //获取焦点隐藏提示
            $(this).next('span').html(' ');
        });

        $('.register-password').blur(function(){
            var thisValue=$(this).val();
            if(!thisValue){     //判断密码是否为空
                phoneLogin=false;
                $(this).next('span').text('*密码不能为空');
            }else{
                phoneLogin=true;
                $(this).next('span').html(' ');
            }
        }).focus(function(){    //获取焦点隐藏提示
            $(this).next('span').html(' ');
        });
        $('.register-password-cf').blur(function(){
            var thisValue=$(this).val();
            var psw=$('.register-password').val();
            if(thisValue!==psw){    //判断密码是否一致
                phoneLogin=false;
                $(this).next('span').text('*密码不一致');
            }else{
                phoneLogin=true;
                $(this).next('span').html(' ');
            }
        }).focus(function(){    //获取焦点隐藏提示
            $(this).next('span').html(' ');
        });

        $('.user-register').find('input').click(function(){
            var userarg=$('.argm').is(':checked'); //用户协议是否勾选
            if(!userarg){
                alert('请先勾选用户协议。');
                return false;
            }

            //判断页面载入其他为空时不能提交
            if($('.username').val()==''||
                $('.register-phone').val()==''||
                $('.register-password').val()==''){
                return false;
            }
            //判断表单是否填写符合要求
            if(!phoneLogin) {
                return false;
            }
        });
    });


});
DevEFX 2017-07-26
  • 打赏
  • 举报
回复
Java的话推荐一款比较好用的验证框架 https://github.com/devefx/validator-web (Java代码自动生成Js验证代码)
Go 旅城通票 2016-05-18
  • 打赏
  • 举报
回复
Validation吧,会js自己写最好。。

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧