Question

我想在用户输入值后立即验证要在单个文本表单字段中输入的电话号码/电子邮件地址。我尝试使用各种验证方法，但这仍然很接近错误返回。我希望用户输入电子邮件地址或电话号码，以获取任一OTP以便登录应用程序。我附上[ui屏幕] [1]的图像以显示我想要实现的目标。我尝试将main.dart中的最终全局密钥定义为：

 MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
//  _formKey and _autoValidate
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  bool _autoValidate = false;
  String _name;
  String _email;
  String _mobile;

`````````````````````````````````````````
I want to validate inputs on my login page and it is returning with errors in the areas highlight in bold text.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class LoginPage extends StatefulWidget {
  @override
  LoginPageState createState() => LoginPageState();
}

class LoginPageState extends State<LoginPage> {
 
  **Widget _showLoginInput() {
    return Padding(
        padding: EdgeInsets.only(top: 20.0),
        child: TextFormField(
 decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Enter phone number/email id',
          hintText: 'Enter phone number/email id',
          
        ),
        keyboardType: TextInputType.emailAddress,
          validator: validateEmail,
          onSaved: (String val) {
            _email = val;
          },
          keyboardType: TextInputType.phone,
          validator: validateMobile,
          onSaved: (String val) {
            _mobile = val;
          },
        
        ));
  }
  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;
  }**

 

  Widget _showOTPAction() {
    return Positioned(
        bottom: 0,
        child: RaisedButton(
          onPressed: () {},
          textColor: Colors.white,
          padding: const EdgeInsets.all(0.0),
          child: Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topRight,
                    end: Alignment.bottomLeft,
                    colors: [
                  Colors.blue[700],
                  Colors.blue,
                  Colors.deepPurple[700]
                ])),
            padding: const EdgeInsets.all(15.0),
            child: const Text(
              'GET OTP',
              style: TextStyle(fontSize: 20),
              textAlign: TextAlign.center,
            ),
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomPadding: false,
        body: Stack(children: <Widget>[

          Container(
              padding: EdgeInsets.symmetric(horizontal: 10.0),
              **child: new Form(
              key: _formKey,
              autovalidate: _autoValidate,**
              
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(
                      height: 180.0,
                    ),
                    Padding(
                        padding: EdgeInsets.all(10.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          
                          **children: <Widget>[
                            _showLiteTitle(),
                            _showAddressTitle(),
                            
                            _showLoginInput(),
                            _showSkipAction()
                          ],**
                        ))
                  ]))),
          _showOTPAction(),
        ]));
  }
}


 


  [1]: https://i.stack.imgur.com/jZQIx.png

Answer 1

我想说的是，如果您想检查用户键入的时间，请在onChanged而不是onSave上添加验证。

 onChanged: (v) {
                 _formKey.currentState.validate();
                            },

这是一个简单的验证器，没有任何正则表达式：

 validator: (value) {
                        if (value.isEmpty) {
                        return 'Please enter email';
                              }
                       if (!value.contains('@') || value.length < 5) {
                         return 'Enter Valid Email';
                              }
                         return null;
                     },

Answer 2

这样做：

<?php foreach ($strategy->strategies_conditions as $key=>$strategiesConditions) : ?>
     <tr>
         <td>
             <?php echo $this->Form->control('strategies_conditions.'.$key.'.name', array( 'label' => false )); ?>
          </td>
    </tr>
<?php endforeach; ?>

如何为文本表单字段添加两个验证器以接受和验证电子邮件或电话号码？

2 个答案: