繁体   English   中英

Flutter 文本表单字段验证

[英]Flutter text form field validation

您好,我正在创建一个手机号码验证屏幕。 在此我想验证印度手机号码。 但是我的代码没有验证,我无法理解问题出在哪里。 如果验证了文本表单字段,则调用 api,如果未验证文本表单字段,则使用警报突出显示文本表单字段。 请帮我解决这个问题。

Form(
        key: _formKeymobile,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              S.of(context).verify,
              style: TextStyle(
                  fontSize: 30.0.sp,
                  fontFamily: 'DancingScript',
                  color: Colors.purple),
            ),
            SizedBox(
              height: 20,
            ),
            TextFormField(
              style: TextStyle(color: Colors.blue, fontSize: 20.0.sp),
              controller: _mobilenumber,
              validator: (value) {
                const pattern =
                    r'(^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[6789]\d{9}|(\d[ -]?){10}\d$)';
                final regExp = RegExp(pattern);
                if (value!.isEmpty) {
                  return S.of(context).EnterSomeText;
                } else if (value.length != 10) {
                } else if (!regExp.hasMatch(value)) {
                  return S.of(context).Mobilenumbermust10digits;
                  return S.of(context).MobileNumbermustbedigits;
                }
              },
              maxLength: 11,
              keyboardType: TextInputType.phone,
              decoration: InputDecoration(
                  hintText: S.of(context).mobile,
                  border: OutlineInputBorder()),
            ),
            SizedBox(
              height: 8.0,
            ),
            Row(
              children: [
                Checkbox(
                  checkColor: Colors.white,
                  value: isChecked,
                  onChanged: (bool? value) {
                    setState(() {
                      isChecked = value!;
                    });
                    // print(isChecked);
                  },
                ),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.60,
                  child: Column(
                    children: [
                      Text(S.of(context).tcone),
                      InkWell(
                          onTap: () {
                            openWebsite(
                                
                                context);
                          },
                          child: Text(
                            S.of(context).tctwo,
                            style: TextStyle(color: Colors.blue),
                          )),
                      Text("and"),
                      InkWell(
                          onTap: () {
                            openWebsite(
                                
                                context);
                          },
                          child: Text(
                            S.of(context).tcthree,
                            style: TextStyle(color: Colors.blue),
                          )),
                    ],
                  ),
                )
              ],
            ),
            ElevatedButton(
              onPressed: () async {
                if (isChecked == true) {
                  if (_formKeymobile.currentState!.validate() &&
                      isChecked == true) {
                    String? deviceId = await _getId();
                    if (deviceId != null) {
                      print("api called");
                    } else {
                      EasyLoading.showError("Unable to get device id");
                    }
                  }
                } else {
                  EasyLoading.showError("Please click the box");
                }
              },
              style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all(Colors.purple)),
              child: Text(S.of(context).otp),
            ),
            SizedBox(
              height: 8.0,
            ),
            ElevatedButton(
              onPressed: () async {
                if (_formKeymobile.currentState!.validate() &&
                    isChecked == true) {
                  print("form validated");
                }
              },
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.green)),
              child: Text("Already have OTP"),
            ),
          ],
        )

尝试这个:

validator: (value) {
                const pattern =
                    r'(^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[6789]\d{9}|(\d[ -]?){10}\d$)';
                final regExp = RegExp(pattern);
                if (value == null || value!.isEmpty) {
                  return S.of(context).EnterSomeText;
                } else if (value.length != 10) {
                } else if (!regExp.hasMatch(value)) {
                  return S.of(context).Mobilenumbermust10digits;
                  return S.of(context).MobileNumbermustbedigits;
                }
              },

并改变这一点:

onPressed: () async {
                if (_formKeymobile.currentState!.validate() &&
                      isChecked == true) {
                    String? deviceId = await _getId();
                    if (deviceId != null) {
                      print("api called");
                    } else {
                      EasyLoading.showError("Unable to get device id");
                    }
                  } else {
                  EasyLoading.showError("Please click the box");
                }
              },

在此处输入图像描述

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM