代码：

wxss：

登录btn的效果需要在手机号码没有输入正确的情况下设置不可用状态。而默认的是绿色。解决方法主要就是在style里直接设置bg-color，而能实现透明度就是设置opacity=0.4，在验证手机号码正确以后在将opacity设置为1，即不透明。

注册的btn 设置了plain 效果，不过border 默认的是黑色，所以要想取得效果的话，就要在style中设置border-color就可以了。（这都是选择器不熟悉的后果啊）

1. <view>
2. <form bindsubmit="sumit">
3. <input bindinput="phone"maxlength="11" type="number" class="marginview" name="phone" placeholder="手机号"/>
4. <input bindinput="password" maxlength="8" password class="marginview"name="passworld" placeholder="密码"/>
5. <button style="opacity: {{opacity}};color: white; background-color: #ff8719;" disabled="{{disabled}}" loading="{{loginLoading}}" class="marginview"form-type="submit">登录</button>
6. </form>
7. <button bindtap="gotoRegist" plain style="color: #ff8719; border-color: #ff8719;" class="marginview">注册</button>
8. <navigator open-type="redirect" hover-class="none" class="marginview textview" url="forgetpw/forgetpw">忘记密码</navigator>
9. </view>

js： 在sumit里请求服务器，返回成功，则提示登录成功。

1. //判断是否是手机号码的方法
2. function IsTel(s){
3. if(s!=null) {
4. var length = s.length;
5. if(length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|)+\d{8})$/.test(s) )
6. {
7. return true;
8. }else{
9. return false;
10. }
11. }
12. }
13.  
14. Page({
15. data:{
16. disabled:true, //是否可用
17. opacity:0.4, //设置透明度
18. },
19. //跳转注册页面
20. gotoRegist:function(){
21. wx.redirectTo({url: '../../pages/login/regist/regist'})
22. },
23. //手机的输入框
24. phone:function(e){
25. var that = this
26. //console.log(e.detail.value)
27. var isTel = IsTel(e.detail.value)
28. //console.log(isTel)
29. if(isTel){
30. that.setData({
31. disabled:false,
32. opacity:1
33. })
34. }else{
35. that.setData({
36. disabled:true,
37. opacity:0.4
38. })
39. }
40. },
41. //提交按钮确认
42. sumit:function(e){
43. console.log(e.detail.value)
44. if(e.detail.value.passworld.length==0){
45. wx.showModal({
46. title: '密码不得为空',
47. showCancel:false
48. })
49. }else{
50. //提交
51. wx.request({
52. url: 'https://URL',
53. data: e.detail.value,
54. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
55. // header: {}, // 设置请求的 header
56. success: function(res){
57. // success
58. if(res.data==1){ //请求成功返回码
59. wx.showToast({
60. title: '登陆成功',
61. icon: 'success',
62. duration: 2000
63. })
64. }
65. },
66. fail: function() {
67. // fail
68. },
69. complete: function() {
70. // complete
71. }
72. })
73. }
74. },
75. })

当然，以上效果有很多方式能实现。