手机号码短信验证
我用的是id编辑器开发
用的技术是ssm
- 去互亿无线注册一个账号获取手机短信验证
- 下载一个短信验证的api文档打开里面的java/http_post/lib四个插件和java/http_post/src里面的工具类
- 后端代码如下`
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接口信息->APIIDnew 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 blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (DocumentException e) {// TODO Auto-generated catch blocke.printStackTrace();}
- 前端代码
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_DOLOGINlet 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>