flutter - 如何使用 flutter 检查输入的电话号码是否有效？

Question

我正在尝试检查输入的电话号码是否有效。
意思是，如果我输入了世界上不存在的错误号码，那么它会向我显示内容为“请输入有效号码”的 toast

 Expanded(
   child: TextField(
     keyboardType: TextInputType.phone,
     decoration: InputDecoration(
       border: InputBorder.none, 
       hintText: "Phone Number", 
     ),
     onChanged: (value){
      setState(() {
        phoneValue=value; 
      });
     //String telNo = value==null?("+91" + value) :null;
     print("phoneNumbe:$phoneNo");
     this.phoneNo = isCountryCodeSelected ? "+" + countryCode + value : "+91" + value ;
     print("phoneNo="+phoneNo);
    },
   ),
 )

Answer 1

请查看此文档 https://medium.com/@nitishk72/form-validation-in-flutter-d762fbc9212c

代码片段 TextFormField 验证器

Widget FormUI() {
    return new Column(
      children: <Widget>[
        new TextFormField(
          decoration: const InputDecoration(labelText: 'Name'),
          keyboardType: TextInputType.text,
          validator: validateName,
          onSaved: (String val) {
            _name = val;
          },
        ),
        new TextFormField(
          decoration: const InputDecoration(labelText: 'Mobile'),
          keyboardType: TextInputType.phone,
          validator: validateMobile,
          onSaved: (String val) {
            _mobile = val;
          },
        ),
        new TextFormField(
          decoration: const InputDecoration(labelText: 'Email'),
          keyboardType: TextInputType.emailAddress,
          validator: validateEmail,
          onSaved: (String val) {
            _email = val;
          },
        ),
        new SizedBox(
          height: 10.0,
        ),
        new RaisedButton(
          onPressed: _validateInputs,
          child: new Text('Validate'),
        )
      ],
    );
  }

  String validateName(String value) {
    if (value.length < 3)
      return 'Name must be more than 2 charater';
    else
      return null;
  }

  String validateMobile(String value) {
// Indian Mobile number are of 10 digit only
    if (value.length != 10)
      return 'Mobile Number must be of 10 digit';
    else
      return null;
  }

  String validateEmail(String value) {
    Pattern pattern =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = new RegExp(pattern);
    if (!regex.hasMatch(value))
      return 'Enter Valid Email';
    else
      return null;
  }

验证电话号码 Flutter - Validate a phone number using Regex

String validateMobile(String value) {
String patttern = r'(^(?:[+0]9)?[0-9]{10,12}$)';
RegExp regExp = new RegExp(patttern);
if (value.length == 0) {
      return 'Please enter mobile number';
}
else if (!regExp.hasMatch(value)) {
      return 'Please enter valid mobile number';
}
return null;
}    

带包https://pub.dev/packages/flutter_form_builder
支持内置和自定义验证器

FormBuilderTextField(
            attribute: "age",
            decoration: InputDecoration(labelText: "Age"),
            validators: [
              FormBuilderValidators.numeric(),
              FormBuilderValidators.max(70),
            ],
          ),

FormBuilderTextField(
attribute: "over_18",
decoration: InputDecoration(labelText: "Are you over 18?"),
validators: [
    FormBuilderValidators.required(),
    (val){
        if(val.toLowerCase() != "yes")
            return "The answer must be Yes";
    },
],
),

您可以将自己的电话号码验证逻辑放在验证器中