Flutter flutter文本框验证

Flutter 手机号码验证

文本框边线框

decoration:new InputDecoration(
// 默认状态边框线
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(5)),
    borderSide: BorderSide(
      color: Colors.white54,
      width: 1.2,
    ),
  ),
// 点击状态边线框
focusedBorder:OutlineInputBorder(
   borderRadius:BorderRadius.all(Radius.circle(5)),
   borderSide:BorderSide(
      color:Colors.blue,
      width:1.2,
   ),
),
// 错误状态边线框
errorBorder:OutlineInputBorder(
  borderRadius:BorderRadius.all(Radius.circular(5)),
  borderSide:BorderSide(
    color:Colors.red,
    width:1.2,
    )
 ),
 // 错误持续状态
 focusedErrorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(5)),
            borderSide: BorderSide(
              color: Colors.red,
              width: 1.2,
            )),
        // 错误时提示文字颜色，大小
        errorStyle: TextStyle(color: Colors.red, fontSize: 16),
        hintStyle: TextStyle(color: Colors.white54),
        hintText: widget.hintText, // 默认状态下提示文字
         //尾部添加清除按钮
        suffixIcon: (_text.length > 0)
            ? IconButton(
                icon: Icon(Icons.clear),
                color: Colors.blue,
                onPressed: () {
                  // 清空输入框内容
                  textConttoller.clear();
                },
              )
            : null,
   ),

class TelePhone extends StatefulWidget {
  @override
  State<TelePhone> createState() => _TelePhoneState();
}

class _TelePhoneState extends State<TelePhone> {
  // 输入框状态
  final _formkey = GlobalKey<FormState>();
  var phone = ''; // 手机号
  var isShowClear = false; // 是否显示输入框尾部的清除按钮
  get validatePhone => null;

  get foucsNodeListener => null;

  @override
  void initState() {
    super.initState();
    utils.speak('请输入手机号');
  }

  @override
  void dispose() {
    // 移除焦点监听
    super.dispose();
    utils.stoptts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false, //输入框抵住键盘，防止屏幕溢出
      body: Container(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              padding: EdgeInsets.fromLTRB(100, 100, 80, 100),
              color: Colors.black54,
              child: Row(
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Container(
                        padding: EdgeInsets.fromLTRB(200, 300, 200, 50),
                        margin: EdgeInsets.all(20),
                        color: Colors.black54,
                        child: Column(children: [
                          Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Container(
                                margin: EdgeInsets.only(top: 100),
                                child: FlatButton(
                                  child: Text(
                                    '确定',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 20
                                    ),
                                  ),
                                  onPressed: () {
                                    if (_formkey.currentState.validate()) {
                                      // 只有输入通过验证，才会执行到这里
                                      _formkey.currentState.save();
                                      Navigator.push(context,
                                        MaterialPageRoute(builder: (conext) {
                                          return LivePeoplePage();
                                        })
                                      );
                                    }
                                  },
                                  color: Color(0xFF8599cb),
                                  padding: EdgeInsets.fromLTRB(100, 15, 100, 15),
                                  shape: RoundedRectangleBorder(
                                    side: BorderSide.none,
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(50),
                                    )
                                  ),
                                ),
                              )
                            ],
                          )
                        ]),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Positioned(
              width: 400,
              child: Form(
                key: _formkey,
                child: KmTextFormField(
                  // 输入模式为手机号
                  keyboardType: TextInputType.phone,
                  hintText: "点击此处输入手机号码",
                  // 手机号输入框校验
                  validator: (value) {
                    RegExp reg = new RegExp(r'^\d{11}$');
                    if (!reg.hasMatch(value)) {
                      return '请输入11位手机号';
                    }
                    return null;
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
  
}

运行结果