资讯专栏INFORMATION COLUMN

Yii2 验证手机号、邮箱唯一性

FuisonDesign / 471人阅读

摘要:好比注册功能模块,手机号邮箱注册这些,肯定是要验证其的唯一性的,重复了登录就会混乱。需求分析使用框架自带的在不刷新页面的情况下验证手机号邮箱唯一性。相关资料表单验证问题注册时验证手机号唯一

序言

验证唯一性很重要,说不上用得很普及,但是也必须要有。好比注册功能模块,手机号、邮箱注册这些,肯定是要验证其的唯一性的,重复了登录就会混乱。那么如何使用Yii2自带的targetClass验证唯一性呢?使页面刷新的可能很多人都会,要是不刷新页面直接触发targetClass验证的应该就少些了吧!不会的也不必苦恼,不必担心,因为我写这篇文章的目的就是要告诉你怎么通过页面不刷新的方式直接触发targetClass验证其手机号、邮箱唯一性。

需求分析

1、使用Yii2框架自带的targetClass在不刷新页面的情况下验证手机号、邮箱唯一性。

效果图

这是点击下一步的时候在页面没刷新的情况下出现的验证提示“手机号已经注册”。

代码分析

1、配置model,我以注册SignupFrom 的model为例,rules里的代码如下:

 public function rules()
    {
         return [
            ["t_mobile", "filter", "filter" => "trim"],
            ["t_mobile", "required"],
             //targetClass 不会自己调用Ajax验证,提交表单后才会触发
            ["t_mobile", "unique", "targetClass" => "loginmodelsUser", "message" => "手机号已经注册。"],
            [["t_mobile"],"match","pattern"=>"/^[1][358][0-9]{9}$/"],
            
            ["t_password","required"],
            ["t_re_password","required"],
            ["t_re_password","compare","compareAttribute"=>"t_password","message"=>"两次密码输入不一致。"],
            ["t_password", "string", "min" => 6],
            ["t_re_password", "string", "min" => 6],
            ["company_id", "trim"],
            ["t_realname", "trim"],
            ["company_id", "required"],
            ["t_realname", "required"],
            ["company_id", "string", "min" => 2, "max" => 255],
            ["t_realname", "string", "min" => 2, "max" => 255], 
            ["code", "required"],
            
            //验证码验证,model自定义验证的写法,也分享给大家了
            ["code", function ($attribute, $params) { 
                $cd=SmsCode::find()->where(["mobile"=>$this->t_mobile,"code"=>$this->$attribute])->one();
                if(!empty($cd->code) && (strtolower($this->$attribute) == strtolower($cd->code))){
                    return true;
                }else{  
                    $this->addError("code","验证码错误。");
                }
            }],

        ];
    }

注释:邮箱和手机号的写法是一样的,区别是pattern的验证规则,如是邮箱验证就换成邮箱的正则匹配符。
2、在Controller里加上如下一段Ajax提交表单验证的代码

       //Ajax表单验证
       if((Yii::$app->request->isAjax && $model->load($post))){

            Yii::$app->response->format=Response::FORMAT_JSON;
            return ActiveForm::validate($model);
        } 

注意:这段代码要放在控制器注册方法的最前面,原因很简单,不可能你所有的操作都完成了再去走验证吧?
3、View层的Ajax验证触发配置
from表单代码如下:

  "signup?id=reg",
                    "id" => "login-form",
                    "validateOnBlur"=>false,//关闭失去焦点验证
                    "enableAjaxValidation"=>true, //开启Ajax验证
                    "enableClientValidation"=>false //关闭客户端验证
 ]); ?>
    

设置用户名

Enter any username and password.
field($model, "t_mobile",["inputOptions"=>["class"=>"form-control form-control-solid placeholder-no-fix","placeholder"=>"手机号"]])->label("") ?>
"btn blue uppercase", "name" => "login-button","id"=>"next"]) ?> "forget-password"]) ?>

注释:(1)、enableAjaxValidation和enableClientValidation的配置必须是enableAjaxValidation为true,enableClientValidation为false。除此之外id也必须要有。
(2)、上面的点击下一步按钮我使用Button,原因是我的注册功能不是一步走完的,需要好几步,好几个页面才能完成注册,要实现全部无刷新,不能直接使用submitButton提交表单,得自己写Ajax提交。但是如果你们做的注册功能是一个页面实现的话,那就可以直接用submitButton提交表单了。以上的配置Ajax验证已经生效,提交表单页面不刷新的情况下也能直接触发targetClass验证,不必担心验证唯一性的时候页面会刷新了。

常见问题

1、只model里配置targetClass唯一性验证,在View层开启enableAjaxValidation和关闭enableClientValidation验证,没有在Controller里边加上文章中我所说的Ajax提交表单验证的代码,导致Ajax验证不成功。那段代码必须要加的。

相关资料

1、YII2表单验证问题:注册时ajax验证手机号唯一 :http://www.yiichina.com/question/241

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/21616.html

相关文章

  • Yii2 验证机号邮箱一性

    摘要:好比注册功能模块,手机号邮箱注册这些,肯定是要验证其的唯一性的,重复了登录就会混乱。需求分析使用框架自带的在不刷新页面的情况下验证手机号邮箱唯一性。相关资料表单验证问题注册时验证手机号唯一 序言 验证唯一性很重要,说不上用得很普及,但是也必须要有。好比注册功能模块,手机号、邮箱注册这些,肯定是要验证其的唯一性的,重复了登录就会混乱。那么如何使用Yii2自带的targetClass验证唯...

    spacewander 评论0 收藏0
  • Yii2 rules常用规则

    摘要:必须值验证属性字段名必填值提示信息说明的别名确保了特性不为空邮箱验证说明的别名确保了特性的值是一个有效的电邮地址正则验证字段名正则表达式提示信息字段名正则表达式提示信息正则取反说明的别名确保了特性匹配一个正则表达式网址说明的别名确保了特性是 required : 必须值验证属性 [[字段名],required,requiredValue=>必填值,message=>提示信息]; #说明...

    Darkgel 评论0 收藏0
  • Yii2系列教程四:实现用户注册,验证,登录

    摘要:开始使用邮箱配置好了之后,我们就可以开始使用了,首先我们来修改一下我们的导航栏,因为我们想实现的就是我们常常看到的在导航栏的右侧的注册和登录按钮。 原文来自: https://jellybool.com/post/programming-with-yii2-integrating-user-regi... 本来打算昨晚写的这篇教程,但是忙着约会去了,所以现在补上吧。 上一篇...

    boredream 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<