手機號碼簡訊驗證註冊

手機號碼簡訊驗證

我用的是id編輯器開發
用的技術是ssm

1. 去互億無線註冊一個賬號獲取手機簡訊驗證
2. 下載一個簡訊驗證的api文件開啟裡面的java/http_post/lib四個外掛和java/http_post/src裡面的工具類
3. 後端程式碼如下`

 3. private static String Url = "http://106.ihuyi.com/webservice/sms.php?method=Submit";
	
	public static void main(String [] args) {
		
		HttpClient client = new HttpClient(); 
		PostMethod method = new PostMethod(Url);

		client.getParams().setContentCharset("GBK");
		method.setRequestHeader("ContentType","application/x-www-form-urlencoded;charset=GBK");

		int mobile_code = (int)((Math.random()*9+1)*100000);

	    String content = new String("您的驗證碼是：" + mobile_code + "。請不要把驗證碼洩露給其他人。");

		NameValuePair[] data = {//提交簡訊
			    new NameValuePair("account", "使用者名稱"), //檢視使用者名稱 登入使用者中心->驗證碼通知簡訊>產品總覽->API介面資訊->APIID
			    new NameValuePair("password", "密碼"), //檢視密碼 登入使用者中心->驗證碼通知簡訊>產品總覽->API介面資訊->APIKEY
			    //new NameValuePair("password", util.StringUtil.MD5Encode("密碼")),
			    new NameValuePair("mobile", "手機號碼"), 
			    new NameValuePair("content", content),
		};
		method.setRequestBody(data);

		try {
			client.executeMethod(method);
			
			String SubmitResult =method.getResponseBodyAsString();

			//System.out.println(SubmitResult);

			Document doc = DocumentHelper.parseText(SubmitResult);
			Element root = doc.getRootElement();

			String code = root.elementText("code");
			String msg = root.elementText("msg");
			String smsid = root.elementText("smsid");

			System.out.println(code);
			System.out.println(msg);
			System.out.println(smsid);

			 if("2".equals(code)){
				System.out.println("簡訊提交成功");
			}

		} catch (HttpException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (DocumentException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}	


		

1. 前端程式碼

 2. <template>
  <div>
    <el-form :rules="rules" ref="form" :model="form" class="login-container" label-position="left" label-width="0px">
      <h1 class="title">使用者註冊</h1>
      <el-form-item prop="usrName">
        <el-input placeholder="請輸入賬號" v-model="usrName"></el-input>
      </el-form-item>
      <el-form-item prop="usrPassword">
        <el-input type="password" show-password="true" placeholder="請輸入密碼" v-model="usrPassword"></el-input>
      </el-form-item>
      <el-form-item prop="usrNumber">
        <el-input placeholder="請輸入手機號碼" v-model="usrNumber"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="請輸入驗證碼" v-model="yzm" style="width: 100px;"></el-input>
        <el-button @click="send()">傳送驗證碼</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" round class="login-wrap" @click="dosubmit">確定</el-button>
      </el-form-item>
      <div align="center">
        <router-link to="/login">已有賬號？馬上登入</router-link>
      </div>
    </el-form>

  </div>
</template>

<script>
  export default {
    data() {
      return {

        usrName: "",
        usrPassword: '',
        usrNumber: '',
        type: 'success',
        newyzm: '',
        yzm: '',
        rules: {
          usrName:[{
            required: true,
            message: '請輸入賬號',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 10,
            message: '長度在 0到 11 個字元',
            trigger: 'blur'
          },


          ],
          usrPassword:[{
            required: true,
            message: '請輸入密碼',
            trigger: 'blur'
          },


          ],

          usrNumber: [{
              required: true,
              message: '請輸入手機號',
              trigger: 'blur'
            },
            {
              min: 0,
              max: 11,
              message: '長度在 0到 11 個字元',
              trigger: 'blur'
            },
            {
              pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
              message: '電話格式有誤！',
              trigger: 'blur'
            }
          ]
        },
      }
    },
    methods: {

       驗證碼的接收
      send: function() {
        this.axios.post(this.axios.urls.SYS_USER_yzm, {
          phone: this.usrNumber
        }).then((resp) => {
          if (resp.data != null) {
            this.$message.success("傳送成功");
            進行賦值
            this.newyzm = resp.data;
          }
        })
      },

      dosubmit: function() {
        var form = {
          usrName: this.usrName,
          usrPassword: this.usrPassword,
          usrNumber: this.usrNumber
        }
        // var url="http://localhost:8080/ssh01/user/useraction_load.action?username=zs&password:123";
        // var url=this.axios.default.SERVER+this.axios.default.SYS_USER_DOLOGIN
        let url = this.axios.urls.SERVER + this.axios.urls.SYS_USER_REG;
        /* this.axios.get(url,{params:{username:"zs",password:"123"}}).then(function(data){
            console.log(data)
        }) */
        進行判斷驗證碼是否相同，如果相同就註冊
        if (this.newyzm == this.yzm) {
          this.axios.post(url, form).then((resp) => {
            if ("註冊成功" == resp.data.msg) {
              this.$message({
                showClose: true,
                message: resp.data.msg,
                type: 'success'
              });
              this.$router.replace("/");
            } else {
              this.$message.error(resp.data.msg)
            }


          })
        } else {
          this.$message.error("驗證碼有誤");
        }

      }
    }
  }
</script>

<style>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* padding-top: 10%; */

    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    background-color: #42B983;
    margin-top: 5%;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>