微信小程序 账号密码 和 手机号 验证码 登录

账号密码页面

<view class="container">
<view class="login-from">
  <form method="post" catchsubmit="formSubmit">
    
    <view class="inputView">
      <label class="loginLab">账号label>
      <input class="inputText" name="username" value="admin" placeholder="请输入账号"  />
    view>
    <view class="line">view>
    
    <view class="inputView">
      <label class="loginLab">密码label>
      <input class="inputText" password="true" name="password" value="admin" placeholder="请输入密码"  />
    view>
    
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}"  form-type="submit">登录button>
    view>
  form>
view>
view>

/* pages/login/login.wxss */
page{ 
  height: 100%; 
 } 
 .container { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  box-sizing: border-box; 
  /* background-color: rgb(156, 23, 78) */
 } 
 /*登录图片*/
 .login-icon{ 
  flex: none; 
 } 
 .login-img{ 
  width: 750rpx;
  height: 400rpx;
 } 
 /*表单内容*/
 .login-from { 
  margin-top: 20px; 
  flex: auto; 
  height:100%; 
 } 
 .inputView { 
  /* background-color: #fff;  */
  line-height: 45px; 
  border-radius:20px;
   border:1px solid #999999;
 } 
 /*输入框*/
 .nameImage, .keyImage { 
  margin-left: 22px; 
  width: 18px; 
  height: 16px
 } 
 .loginLab { 
  margin: 15px 15px 15px 10px; 
  color: #545454; 
  font-size: 14px
 } 
 .inputText { 
  flex: block; 
  float: right; 
  text-align: right; 
  margin-right: 22px; 
  margin-top: 11px;
  color: #cccccc; 
  font-size: 14px
 } 
 .line { 
  margin-top: 8px; 
 } 
 /* .line { 
  width: 100%; 
  height: 1px; 
  background-color: #cccccc; 
  margin-top: 1px; 
 }  */
  
 /*按钮*/
 .loginBtnView { 
  width: 100%; 
  height: auto; 
  /* background-color:#DCDCDC;  */
  margin-top: 0px; 
  margin-bottom: 0px; 
  padding-bottom: 0px; 
 } 
  
 .loginBtn { 
  width: 90%; 
  margin-top: 40px; 
  border-radius:10px;
 }

手机号登录

<view class="container">
  <view class="title">登录view>
  <form catchsubmit="login">
    <view class="inputView">
      <input class="inputText" placeholder="请输入手机号" name="phone" bindblur="phone" />
    view>
    <view class="inputView">
      <input class="inputText" placeholder="请输入验证码" name="code" />
      <button class="line" disabled="{{disabled}}" size="mini" bindtap="sendcode">{{codebtn}}button>
    view>
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" formType="submit">登录button>
    view>
  form>
view>

wxss 页面

 .container { 
  display: flex;  
  flex-direction: column; 
  padding: 0; 
 } 
 .inputView { 
  line-height: 45px; 
  border-bottom:1px solid #999999;
 } 
.title{
  width: 80%;
  font-weight: bold;
  font-size: 30px;
}
 .inputText { 
  display: inline-block; 
  line-height: 45px; 
  padding-left: 10px; 
  margin-top: 11px;
  color: #cccccc; 
  font-size: 14px;
 } 
 
 .line {
  border: 1px solid #ccc;
  border-radius: 20px; 
  float: right; 
  margin-top: 9px;
  color: #cccccc;
 } 
 .loginBtn { 
  margin-top: 40px; 
  border-radius:10px;
 }

这里是 js 实际逻辑

// pages/logins/logins.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone:'',
    code: '',
    codebtn:'发送验证码',
    disabled:false,

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  // 获取输入账号 
  phone: function (e) {
    let phone = e.detail.value;
    let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!reg.test(phone)) {
      wx.showToast({
        title: '手机号码格式不正确',
        icon:"none",
        duration:2000
      })
      return false;
    }
    this.setData({
      phone: e.detail.value
    })
  },
  //发送验证码
  sendcode(){
    let that =this;
    let phone =this.data.phone;
    wx.request({
      url: 'http://www.tp6.com/lx/login/phonecode',
      data:{phone},
      dataType:'json',
      success:({data})=>{
        console.log(data);
        if(data.code==200){
          wx.showToast({
            title: '验证码已发送.请注意接收',
            icon:"success"
          })  
          let time = 60;
          var timers=setInterval(function () {
            time--;
            if (time>0){
              that.setData({
                codebtn:time,
                disabled:true
              });
            }else{
              that.setData({
                codebtn:'发送验证码',
                disabled:false
              });
              clearInterval(timers)
            }
          },1000)
        }else{
          wx.showToast({
            title: data.msg,
            icon:"none",
            duration:2000
          })
        }
      }
    })
  },

  // 登录处理
  login: function (evt) {
    // console.log(evt);
    var that = this;
    let val = evt.detail.value;
    if (val.phone=="" ){
      wx.showToast({
        title: '请填写手机号码',
        icon: 'none',
        duration: 2000
      })
      return false;
    }
    if (val.code=="" || isNaN(val.code) || val.code.length !=4 ){
      wx.showToast({
        title: '验证码格式不正确',
        icon: 'none',
        duration: 2000
      })
      return false;
    } else {
      wx.request({
        url: 'http://www.tp6.com/lx/login/phone', // 仅为示例，并非真实的接口地址
        method: 'post',
        data: {
          username: that.data.username,
          password: that.data.password
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        success(res) {
          console.log(res);
          if (res.data.code == "200") {
            wx.switchTab({
              url: '/pages/list/list',
            })
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    }
  }
})

效果图

PHP 短信发送

if (!function_exists('phone_code')) {
    function phone_code($phone){
        $phone = input('phone') ?? '';
        if (!preg_match('/^1[3-9]\d{9}$/', $phone)) return ['code'=>1001,'msg'=>'手机号不符合规则','data'=>''] ;
        //判断 是否重复发送
        $last_time = \cache('week_time_' . $phone);
        if ((time() - $last_time) < 60)  return ['code'=>1001,'msg'=>'验证码获取太过频繁，请一分钟后再试','data'=>''];

        //调用 函数 发送 随机验证码
        $number = rand(1111, 9999);
        $content = "【品优购】你的验证码是：{$number}，3分钟内有效！";
        //调用 公共方法
        $result = sendmsg($phone, $content);

        if ( $result && $result['code'] == 200 ) {
            //记录住验证码内容
            cache("week_" . $phone, $number, 60);
            //记录发送验证码的时间
            cache("week_time_" . $phone, time());
            return ['code'=>200,'msg'=>$result['msg'],'data'=>''];
        } else {
            return ['code'=>1001,'msg'=>$result['msg'],'data'=>''];
        }
    }
}

if (!function_exists('sendmsg')) {
    //使用curl_request函数调用短信接口发送短信
    function sendmsg($phone, $number = '',$content = '')
    {
        //从配置中取出请求地址、appkey
        $gateway = config('phone.gateway');
        $appkey = config('phone.appkey');
        //https://way.jd.com/chuangxin/dxjk?mobile=13568813957&content=【创信】你的验证码是：5873，3分钟内有效！&appkey=您申请的APPKEY
        $url = $gateway . '?appkey=' . $appkey;
        if ($content && $number = ''){
            $url .= '&mobile=' . $phone . '&content=' . $content;
            //get
            //$res = curl_request($url, false, [], true);
            //post请求
            $params = [
                'mobile' => $phone,
                'content' => $content
            ];
        }else{
            $content =  $content = "【品优购】你的验证码是：{$number}，3分钟内有效！";
            $url .= '&mobile=' . $phone . '&content=' . $content;
            //get
            //$res = curl_request($url, false, [], true);
            //post请求
            $params = [
                'mobile' => $phone,
                'content' => $content
            ];
        }

        $res = curl_request($url, true, $params, true);
        //处理结果
        if (!$res) {
            return ['code'=>1001,'msg'=>'请求发送失败','data'=>''];
        }
        //解析结果
        $arr = json_decode($res, true);
        if (isset($arr['code']) && $arr['code'] == 10000) {
            //短信接口调用成功
            return ['code'=>200,'msg'=>'验证码发送成功','data'=>''];
        } else {
            return ['code'=>1001,'msg'=>'验证码发送失败','data'=>''];
        }
    }

控制器

 public function test()
   {
       $phone = input('phone') ?? '';
       //$res =  phone_code($phone);  //
       $number = rand(000,9999);
       $res = sendmsg($phone,$number ,'');
       if ( $res['code'] == 200) return json(['code'=>200,'msg'=>$res['msg'],'data'=>$res]);
       return json(['code'=>1001,'msg'=>$res['msg'],'data'=>'']);
   }

   public function plogin(Request $request)
   {

       $params = input();
       $validate = Validate::rule([
           'phone'=> 'require|mobile',
           'code' => 'require|length:4'
       ]);
       cache('week_'.$params['phone'],'1234',300);

       if (!$validate->check($params)) return json(['code'=>1001,'msg'=>$validate->getError(),'data'=>'']);
       $old_code = cache('week_'.$params['phone']) ?? '';
       cache('week_'.$params['phone'],'');
       halt($old_code);
       if ($old_code != $params['code']) return json(['code'=>1001,'msg'=>'验证码错误','data'=>'']);
       $model = \app\model\User::where('phone',$params['phone'])->find();
       if (!$model) return json(['code'=>1001,'msg'=>'用户不存在 请先注册','data'=>'']);
       return json(['code'=>200,'msg'=>'登录成功','data'=>'']);

   }