精华内容
下载资源
问答
  • 这种场景下,可以直接可以布局文件中使用Databinding直接对Edittext的数据进行检查,若其中有一个信息为空,则登录按钮禁用,就可以省去Activity写很多的检查代码。 1. 如何获取所有Edittext 输入的文本...

    在使用MVVM模式来开发应用时,我们在布局文件中有可能使用到DataBinding 。

    例如在登录界面里,我们通常都是要检验输入的用户名和密码不能为空才可以进行登录。

    在这种场景下,可以直接可以在布局文件中使用Databinding直接对Edittext的数据进行检查,若其中有一个信息为空,则登录按钮禁用,就可以省去在Activity写很多的检查代码。

     

    1.  如何获取所有Edittext 输入的文本信息

        EditText通过双向数据绑定 @={} ,把用户输入的信息分别存放到两个临时变量里 。其他控件则可以取出EditText的值。

    <data>
    
         <!-- ViewModel 层-->  
         <variable
              name="loginModel"
              type="com.zzh.haohm.ui.login.LoginViewModel" />
    
    
         <!-- 临时变量,记录EditText输入的值-->
         <variable
              name="username"
              type="String" />
    
         <variable
              name="password"
              type="String" />
    
    </data>
     <androidx.appcompat.widget.AppCompatEditText
                    android:id="@+id/et_userName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"                
                    android:singleLine="true"
                    android:text="@={username}"  />
    
    
     <androidx.appcompat.widget.AppCompatEditText
                    android:id="@+id/et_psw"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:singleLine="true"
                    android:text="@={password}" />

     

    2. Databinding表达式判断EditText的数据是否为空

    先知道Databinding条件判断语法如下:

     <!--TextView-->
    android:text='@{username==null?"null":username}'

    上面意思是,TextView如果表达式username为null时,则显示“null”, 不为空显示username的值。也可以通过Databinding的空判断运算符 ‘??’  简写为这样

    android:text='@{username??"null"}'  

     有点类似于Kotlin 的 ?: 运算符

     

     variable中的临时变量username,password默认值都为null  ,但如果先输入了一些数据然后全部删除了,则临时变量的值为空字符串。所以检查username,password不能直接判空,而是使用TextUtils这个Java工具类进行判断,而且要同时判断两个临时变量的值。但问题Databinding并不支持直接写与 && 这样的运算符,所以我们也可以用三元表达式实现

     

    
    <data>
    
         <!--使用Java某些类都要通过import导入才能正常使用-->
         <import type="android.text.TextUtils" alias="textUtlis" />
    
         .....
    
    </data>
     <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/bt_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:enabled="@{!textUtlis.isEmpty(username)?!textUtlis.isEmpty(password)?true:false:false}"
                android:onClick='@{v->loginModel.login(username ?? "",password ?? "",v) }'
                android:text="登陆" />

     

    登陆按钮中,enabled属性设置了 

    android:enabled="@{!textUtlis.isEmpty(username)?!textUtlis.isEmpty(password)?true:false:false}"

    首先用三目运算符判断username,username不为空时,继续用三目运算符判断password 这样嵌套判断,从而实现多个条件判断。上面等同于  ( !TextUtlis.isEmpty(username) && !TextUtlis.isEmpty(password))  这样的意思

     

    3.  Databinding表达式使用 && 进行多条件判断

    我们都希望可以在databinding layout表达式中直接使用&& 逻辑判断,但遗憾会报错!这里可以使用&的转义字符 &amp; 替代,则上面的用户名密码判空操作可以直接写成

    android:enabled="@{!TextUtlis.isEmpty(username) &amp; &amp;  !TextUtlis.isEmpty(password)}"

     

    最后经测试,Databinding判断或逻辑表达式中, 不需要转义的有 > ,  || , == , != ;需要转义的  < ,&& 。关于转义字符可以参考html转义字符。这里常用的参考:

    字符 转义字符
    > &gt;
    < &lt;
    & &amp;
    " &quot;

     

    展开全文
  • 但是, Windows Phone 8.1 Runtime ,要实现数据验证,只能靠最基础的手动编写条件判断代码来实现。如果用过 ASP.NET MVC 的那套数据验证的话,再来 WP8.1,那简直就是回到原始社会的感觉。 现在,得益于大一统...

    WPF 中数据验证的方式多种多样,这里就不说了。但是,在 Windows Phone 8.1 Runtime 中,要实现数据验证,只能靠最基础的手动编写条件判断代码来实现。如果用过 ASP.NET MVC 的那套数据验证的话,再来 WP8.1,那简直就是回到原始社会的感觉。

    现在,得益于大一统,mobile 端的 App 也能用上 ValidationAttribute 了!(主要是指 System.ComponentModel.DataAnnotations 这个命名空间下的 Attribute)。

    那么,接下来我就用 ValidationAttribute 来做一个简单的数据验证 Demo。

    一、准备 Model

    本次 Demo 我打算做一个用户注册的 Demo,那么用户注册的话,就需要填写 Email、Password 之类的信息,并且需要验证是否已经填写或者在正确范围内。那么我们先编写一个最基础的 Model,我就叫 User 类。

    public class User
    {
        public string Email
        {
            get;
            set;
        }
    
        public string Password
        {
            get;
            set;
        }
    
        public int Age
        {
            get;
            set;
        }
    
        public string Address
        {
            get;
            set;
        }
    }

    这里我准备了 4 个属性,分别是 Email、密码、年龄和地址。其中 Email、密码、年龄都是必填的,密码这种还必须有长度限制。结合 ValidationAttribute,我们修改 User 类为如下:

    public class User
    {
        [Required(ErrorMessage = "请填写邮箱")]
        [EmailAddress(ErrorMessage = "邮箱格式错误")]
        public string Email
        {
            get;
            set;
        }
    
        [Required(ErrorMessage = "请填写密码")]
        [StringLength(20, MinimumLength = 6, ErrorMessage = "密码最少 6 位,最长 20 位")]
        public string Password
        {
            get;
            set;
        }
    
        [Range(18, 150, ErrorMessage = "不到 18 岁不能注册,并请填写合适范围的值")]
        public int Age
        {
            get;
            set;
        }
    
        [StringLength(50, ErrorMessage = "地址太长")]
        public string Address
        {
            get;
            set;
        }
    }

    二、如何验证?

    这里我们先暂停下 Demo 的编写。我们已经为属性标注好了 ValidationAttribute,那么怎么知道这个 User 类的实例是否通过了验证,而在验证不通过的时候,又是哪个属性出问题呢?既然 .Net 框架给了这些 ValidationAttribute,那么肯定也给了如何获取验证结果的。查阅 ValidationAttribute 所在的命名空间后,我们找到一个叫 Validator 的类,这个就是用户获取验证结果的。

    编写测试代码:

    private void GetValidationResult()
    {
        User user = new User()
        {
            Email = "hello@world.com",
            Password = "123",
            Age = 18,
            Address = "XYZ"
        };
    
        ValidationContext context = new ValidationContext(user);
        List<ValidationResult> results = new List<ValidationResult>();
        bool isValid = Validator.TryValidateObject(user, context, results, true);
    
        Debugger.Break();
    }

    在这段代码中,我们构造了一个 User 类的实例,并设置了一些属性。你可以看见,其中 Password 属性是不符合验证的,因为长度不足。

    接下来三行代码就是进行验证。最后是断点。

    运行之后,我们可以发现,isValid 为 false,并且 results 里面被填充了一个对象。

    QQ截图20151112172559

    如果修改 Password 属性为符合验证要求的话,再次执行代码的话,那么 isValid 就会变成 true,results 的 Count 属性也会保持为 0。

    所以验证的结果就是存放在 results 对象当中。

    三、数据绑定与 Validation 结合

    再次回到 Demo 的编写中,因为我们需要使用数据绑定,所以需要 User 类实现 INotifyPropertyChanged 接口,并且,对于验证这个需求,我们应该添加是否验证成功和验证结果这两个属性。

    因为验证需求不仅仅是用在 User 类上,这里我抽象出一个基类,叫 VerifiableBase。同时我再编写一个叫 BindableBase 的基类,这个作为数据绑定模型的基础,相当于 MVVMlight 中的 ObservableObject。

    BindableBase:

    public abstract class BindableBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
    
        public virtual void RaisePropertyChanged([CallerMemberName]string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    
        protected virtual void Set<T>(ref T storage, T newValue, [CallerMemberName]string propertyName = null)
        {
            if (Equals(storage, newValue))
            {
                return;
            }
            storage = newValue;
            RaisePropertyChanged(propertyName);
        }
    }

    VerifiableBase:

    public abstract class VerifiableBase : BindableBase
    {
        private VerifiableObjectErrors _errors;
    
        public VerifiableBase()
        {
            _errors = new VerifiableObjectErrors(this);
        }
    
        public VerifiableObjectErrors Errors
        {
            get
            {
                return _errors;
            }
        }
    
        public bool IsValid
        {
            get
            {
                return _errors.Count <= 0;
            }
        }
    
        public override void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            base.RaisePropertyChanged(propertyName);
            _errors = new VerifiableObjectErrors(this);
            base.RaisePropertyChanged(nameof(Errors));
            base.RaisePropertyChanged(nameof(IsValid));
        }
    }

    这里我添加了 IsValid 属性表示该对象是否验证成功,添加 Errors 属性存放具体的错误内容。

    在属性发生变更的情况下,我们必须重新对该对象进行验证,因此 override 父类 BindableBase 中的 RaisePropertyChanged 方法,重新构建一个错误信息对象,并通知 UI 这两个属性发生了变化。

    VerifiableObjectErrors:

    public class VerifiableObjectErrors : IReadOnlyList<string>
    {
        private List<string> _messages = new List<string>();
    
        private List<ValidationResult> _results = new List<ValidationResult>();
    
        internal VerifiableObjectErrors(VerifiableBase verifiableBase)
        {
            ValidationContext context = new ValidationContext(verifiableBase);
            Validator.TryValidateObject(verifiableBase, context, _results, true);
            foreach (var result in _results)
            {
                _messages.Add(result.ErrorMessage);
            }
        }
    
        public int Count
        {
            get
            {
                return _messages.Count;
            }
        }
    
        public string this[int index]
        {
            get
            {
                return _messages[index];
            }
        }
    
        public string this[string propertyName]
        {
            get
            {
                foreach (var result in _results)
                {
                    if (result.MemberNames.Contains(propertyName))
                    {
                        return result.ErrorMessage;
                    }
                }
                return null;
            }
        }
    
        public IEnumerator<string> GetEnumerator()
        {
            return _messages.GetEnumerator();
        }
    
        IEnumerator IEnumerable.GetEnumerator()
        {
            return GetEnumerator();
        }
    }

    这个对象是一个只读集合(实现 IReadOnlyList<T> 接口)。在构造函数中,验证 VerifiableBase 对象,并将验证结果存储起来。添加了一个参数类型为 string 类型的索引器,可以通过传递属性名称获取该属性的第一条错误消息,如果该属性验证通过,没有错误的话,则返回 null。

     

    在这些基础的都编写完之后,修改最开始的 User 对象:

    public class User : VerifiableBase
    {
        private string _email;
    
        private string _password;
    
        private int _age;
    
        private string _address;
    
        [Required(ErrorMessage = "请填写邮箱")]
        [EmailAddress(ErrorMessage = "邮箱格式错误")]
        public string Email
        {
            get
            {
                return _email;
            }
            set
            {
                Set(ref _email, value);
            }
        }
    
        [Required(ErrorMessage = "请填写密码")]
        [StringLength(20, MinimumLength = 6, ErrorMessage = "密码最少 6 位,最长 20 位")]
        public string Password
        {
            get
            {
                return _password;
            }
            set
            {
                Set(ref _password, value);
            }
        }
    
        [Range(18, 150, ErrorMessage = "不到 18 岁不能注册,并请填写合适访问的值")]
        public int Age
        {
            get
            {
                return _age;
            }
            set
            {
                Set(ref _age, value);
            }
        }
    
        [StringLength(50, ErrorMessage = "地址太长")]
        public string Address
        {
            get
            {
                return _address;
            }
            set
            {
                Set(ref _address, value);
            }
        }
    }

    四、在 UI 中显示验证

    测试页面我就叫 MainView,它的 ViewModel 则为 MainViewModel。

    编写 MainViewModel:

    public class MainViewModel
    {
        private RelayCommand _registerCommand;
    
        private User _user;
    
        public MainViewModel()
        {
            _user = new User();
        }
    
        public RelayCommand RegisterCommand
        {
            get
            {
                _registerCommand = _registerCommand ?? new RelayCommand(async () =>
                {
                    StringBuilder sb = new StringBuilder();
                    sb.AppendLine($"邮箱:{User.Email}");
                    sb.AppendLine($"密码:{User.Password}");
                    sb.AppendLine($"年龄:{User.Age}");
                    sb.AppendLine($"地址:{User.Address}");
                    await new MessageDialog(sb.ToString()).ShowAsync();
                });
                return _registerCommand;
            }
        }
    
        public User User
        {
            get
            {
                return _user;
            }
        }
    }

    接下来编写 MainView 的代码:

    <Page x:Class="UWPValidationDemo.Views.MainView"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="using:UWPValidationDemo.Views"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:vm="using:UWPValidationDemo.ViewModels"
          mc:Ignorable="d">
        <Page.DataContext>
            <vm:MainViewModel></vm:MainViewModel>
        </Page.DataContext>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <StackPanel HorizontalAlignment="Center"
                        Width="450">
                <StackPanel Margin="10">
                    <TextBox Header="邮箱"
                             Text="{Binding Path=User.Email,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
                    <TextBlock Text="{Binding Path=User.Errors[Email]}"
                               Foreground="Red"></TextBlock>
                </StackPanel>
                <StackPanel Margin="10">
                    <PasswordBox Header="密码"
                                 Password="{Binding Path=User.Password,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></PasswordBox>
                    <TextBlock Text="{Binding Path=User.Errors[Password]}"
                               Foreground="Red"></TextBlock>
                </StackPanel>
                <StackPanel Margin="10">
                    <TextBox Header="年龄"
                             Text="{Binding Path=User.Age,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
                    <TextBlock Text="{Binding Path=User.Errors[Age]}"
                               Foreground="Red"></TextBlock>
                </StackPanel>
                <StackPanel Margin="10">
                    <TextBox Header="地址"
                             Text="{Binding Path=User.Address,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
                    <TextBlock Text="{Binding Path=User.Errors[Address]}"
                               Foreground="Red"></TextBlock>
                </StackPanel>
                <Button Content="注册"
                        HorizontalAlignment="Center"
                        IsEnabled="{Binding Path=User.IsValid}"
                        Command="{Binding Path=RegisterCommand}"></Button>
                <StackPanel Margin="20">
                    <TextBlock Text="所有错误:"></TextBlock>
                    <ItemsControl ItemsSource="{Binding Path=User.Errors}"></ItemsControl>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Page>

    TextBox、PasswordBox 用于填写,需要注意的是,Mode 需要为 TwoWay,UpdateSourceTrigger 为 PropertyChanged。TwoWay 是因为需要将 TextBox 的值写回 User 类的实例中,PropertyChanged 是因为我们需要实时更新验证,而不是控件失去焦点才验证。注册按钮则绑定 IsValid 到按钮的 IsEnabled 属性上。最后用一个 ItemsControl 来显示 User 类实例的所有错误,ItemsControl 有一个 ItemsSource 属性,绑定一个集合后,ItemsControl 将会显示每一个集合中元素,如果有用过 ListView 的话应该会很熟悉。

    五、运行

    不填写任何时:

    QQ截图20151112194023

    填写错误时:

    QQ截图20151112194124

    正确填写时:

    QQ截图20151112194217

    QQ截图20151112194321

    六、结语

    可见,通过将数据绑定和 Validation 结合起来后,我们再也不用写一堆又长又臭的条件判断代码了。(^o^)

    另外,在上面的代码中,我们是在 Model 和 BindableBase 的继承关系中插入一个 VerifiableBase 类。同理,对于 ViewModel,我们也能够轻易写出一个 VerifiableViewModelBase 出来,用于 ViewModel 属性上的验证。这里就大家自己编写了,最后放上这个 Demo 的代码:UWPValidationDemo.zip

    转载于:https://www.cnblogs.com/h82258652/p/4960121.html

    展开全文
  • struts 数据验证

    2015-07-06 11:41:00
    1. validate()验证 将对页面表单验证的内容写到validate()... Action添加 validate()方法 public void validate(){ if(//****){ addFieldError("name","XX不能XXX。。。。"); // 如果条件不匹配,可以使用...

     

    1. validate()验证

       将对页面表单验证的内容写到validate()方法中,实现验证和业务处理内容的分离


       在Action中添加 validate()方法
       public void validate(){
         if(//****){
               addFieldError("name","XX不能XXX。。。。");  // 如果条件不匹配,可以使用 addFieldError()方法添加到对ActionContext中。
         }
        }

     

       在JSP页面 通过  <s:fielderror/>  显示错误信息

       Action中添加了validate()方法后, 一旦在验证过程中添加了验证信息,那么Struts2框架会更具Action的配置跳转到input的视图页面。

      提示:1) 接受参数时, 数据失败也会调用validate()方法
              2) validate()方法验证不通过,不会执行业务方法

    2. validateXxx() 验证

        当多个表单提交到同一个action页面是,validate()方法对所有表单生效,可以使用validateXxx()方法实现对某一个业务的验证

       例如: 

              JSP 表单  提交到  Login.action 的 login() 方法, 可以再Login.action 对应类中添加   validateLogin() 的验证方法

       提示: 

       1) validate()方法会对Action类中所有业务方法起作用
      2)validateXxx()方法实现对某个业务方法进行数据验证。
        i:Struts2支持validateXxx()方法进行数据验证
        i:使用validateRegister()方法实现针对 register()方法的验证
      3)validate()方法和 validateXxx()方法同时存在时,都会起作用
      4)validateXxx()方法的调用优于validate()方法

     

    3. Struts2的框架验证

       不管是采用上面哪两种方法,都需要手动编写校验规则。当验证规则复杂时就会导致Action类的臃肿。 可以使用Struts2框架,用户

    无需编码,只要在外部配置文件中制定某个字段需要进行的验证类型,并提供出错信息即可,能够减轻开发者的负担,提高开发效率。

        1) Action 类中不需要添加 validate() 或  validateXxx() 方法

        2) struts.xml 文件不需要验证配置

        3) JSP页面          

      <s:fielderror/>
      <form action="login.action">
      <s:text name="userName"></s:text> : <s:textfield name="name" ></s:textfield> <br/>
      <s:text name="userPwd"></s:text>: <s:password name="pwd" ></s:password> <br/>
      <s:text name="submit"></s:text> : <input type="submit" />
      </form>
    

      

        4) 在 Action 同包下创建验证文件。

              验证文件的命名规则: ClassName-validation.xml 或者 ClassName-alias-validation.xml 

             【文件可以查看struts的示例文件】        

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE validators PUBLIC 
    "-//Apache Struts//XWork Validator 1.0.2//EN"
    "http://struts.apache.org/dtds/xwork-validator-1.0.2.dtd">
    <validators>
    <field name="name">
    <field-validator type="requiredstring">
    <param name="trim">true</param>
    <message>用户名不能为空</message>
    </field-validator>
    <field-validator type="stringlength">
    <param name="maxLength">10</param>
    <param name="minLength">6</param>
    <message>用户名长度必须在 ${minLength}和 ${maxLength}之间 </message>
    </field-validator>
    </field>
    </validators>

         requiredstring : 规定一个字符串不能为null,且不能为空字符串

         stringlength: 检查一个字符串的长度范围, 可以通过minLength和maxlength两个参数指定字段的最小长度和最大程度

         fieldexpression: 使用OGNL表达式来验证字段。 例如 <param name="expression" >pwd1==pwd2</param>

         regex:正则表达式

     

     

    4. 数据校验总结

       

     

     

       

     

    转载于:https://www.cnblogs.com/Theladyflower/p/4623977.html

    展开全文
  • 相信大家实现登录的时候,都使用过验证码,传统的方式是servlet的方式,servlet定义一个处理器,然后再进行验证,整个form数据只能一次性的整个提交,提交之后交给servlet来处理,判断哪一个条件不符合...

    在这里插入图片描述

    最近我的小可爱说,她不会用jax的方式对随机生成的4位验证码进行验证,我当时就急了,这不得展示一下我的“技术”,美美的撩五我的小可爱!

    正文区

    相信大家在实现登录的时候,都使用过验证码,传统的方式是servlet的方式,在servlet中定义一个处理器,然后再进行验证,整个form中的数据只能一次性的整个提交,提交之后交给servlet来处理,判断哪一个条件不符合然后,给用户提示:

    在这里插入图片描述

    但是大家有没有发现,这样的效率太低了,如果我直接输入用户名,通过发ajax请求,在控制器中直接 进行判断 ,然后将结果通过局部刷新的方式响应给用户,这样就会大大提交效率,下面我们用发ajax的方式对验证码进行局部刷新!

    代码区

    首先你得有一个验证码,当然,这个验证码是一个图片:

    • imgs.jsp
    <%@page import="javax.imageio.ImageIO"%>
    <%@page import="java.awt.image.BufferedImage"%>
    <%@ page import="java.awt.*" %>
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ page contentType="image/jpeg; charset=UTF-8" language="java"%>
    
    <%!
    	//随机产生颜色
    	public Color getColor(){
    		Random ran = new Random();
    		
    		int r = ran.nextInt(256);
    		int g = ran.nextInt(256);
    		int b = ran.nextInt(256);
    	
    		return new Color(r,g,b);
    	}
    	
    	//产生验证码值
    	public String getNum(){
    		//1000-9999
    		int ran = (int)(Math.random()*9000)+1000;
    		return String.valueOf(ran);
    	}
    	
    %>
    <%
    
    	//禁止缓存,防止验证码过期
    	response.setHeader("Prama", "no-cache");
    	response.setHeader("Cache-control", "no-cache");
    	response.setHeader("Expires", "0");
    	
    	
    	//绘制验证码
    	BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_BGR);
    	//画笔
    	Graphics graphics = image.getGraphics();
    	graphics.fillRect(0, 0, 80, 30);
    	
    	//绘制干扰线条
    	for(int i = 0;i < 60;i++){
    		Random ran = new Random();
    		int xBegin = ran.nextInt(80);
    		int yBegin = ran.nextInt(30);
    		
    		int xEnd = ran.nextInt(xBegin + 10);
    		int yEnd = ran.nextInt(yBegin + 10);
    		
    		graphics.setColor(getColor());
    		//绘制线条
    		graphics.drawLine(xBegin, yBegin, xEnd, yEnd);
    		
    	}
    	
    		graphics.setFont(new Font("seif",Font.BOLD,20));
    		
    		
    		//绘制验证码
    		graphics.setColor(Color.BLACK);
    		
    		String checkCode = getNum();
    		StringBuffer sb = new StringBuffer();
    		for(int i = 0;i < checkCode.length();i++){
    			sb.append(checkCode.charAt(i)+" ");//验证码的每一位数字
    		}
    		//
    		graphics.drawString(sb.toString(), 15, 20);//绘制验证码
    		
    		//将验证码真实值 保存在session中,供使用时比较真实性
    		session.setAttribute("CKECKCODE",checkCode);
    		
    		//真实的产生图片
    		ImageIO.write(image, "jpeg", response.getOutputStream());
    		
    		//关闭操作
    		out.clear();
    		out = pageContext.pushBody();
    %>
    

    这里用的是bootstrap,不会用的大家可以去恶补一下,当然 大家也可以自由发挥,主要是要搞懂原理:

    • index.jsp
    <div class="form-group">
            <label class="col-sm-2 control-label">&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
            <div class="col-sm-10" style="width: 90px;padding-left: 30px">
                   <input type="text" style="width: 90px;display:block" id="checkcodeId" class="form-control" name="Yzm" placeholder="验证码">
             </div>
             <!--<input class="yzm" type="text" id="checkcode" name="checkcode"size="4">-->
             <div class="imghh"style="float: left;padding-left: 40px">
                   <img src="imgs.jsp" id="get_Yzm" name="Img" onclick="reImg();"/><br/>
            </div>
            //用来显示验证后的验证码的正确性
            <div class="col-sm-2">
                   <span id="tip" style="vertical-align: middle;position: absolute ;left: 50px"></span>
            </div>
      </div>
      <script type="text/javascript" >
            function reImg(){
                var img = document.getElementById("Img");
                var i = Math.random();
                img.src="imgs.jsp?id="+i;
            }
            //jquery的入口函数
    		$(function () {
    			//id为checkcodeId,鼠标失去焦点时,发ajax请求
                $("#checkcodeId").blur(function () {
                    //拿到id为checkcodeId输入框中的值
                    var $Yzm = $("#checkcodeId").val();
                    $.ajax({
                        url:"getYzm",//请求的url
                        type:"POST",//发送请求的方式为POST
                        data:"Yzm="+$Yzm,//传入的参数拿到的输入框中的值 
                        success:function (result) {
                            var resultHtml = $("<img src='"+result+"' height='30px' width='30px'>");
                            //将这个标签通过html的方式写入到id为tip的位置上
                            //注意通过html的方式可以保留标签
                            $("#tip").html(resultHtml);
                        }
                    });
                });
            });
       </script>
    
    • loginController.java
    @RequestMapping("/getYzm")
        public void  getYzm(HttpServletRequest request , HttpServletResponse response) throws IOException {
    		//定义初值
            String resultTyp = "img/x.png";
    		//拿到用户输入的值
            String YzmClient = request.getParameter("Yzm");
    		//获取服务器中session中的值 
            String YzmService = (String)request.getSession().getAttribute(("CKECKCODE"));
    
            System.out.println(YzmService);
    
            if (YzmService.equals(YzmClient)){
                resultTyp="img/v.png";
            }
            response.setContentType("text/html; charset=UTF-8");
            PrintWriter writer = response.getWriter();//输出流
    
            writer.write(resultTyp);
            writer.flush();
            writer.close();
        }
    

    效果区

    好了,下面我们来看实现的效果:

    在这里插入图片描述

    前方高能:

    这两个图标我也给大家,要不然大家找也不方便:

    链接:https://pan.baidu.com/s/1AUDymnlmwKvAB_O5pPRttA
    提取码:gig7

    这就是通过ajax的方式异步进行验证码的验证的过程,如果过程中有什么问题,希望大家不吝赐教!

    怎么样,我的小可爱都学会了,大家怎么样了,大家可以在评论区留言哦!

    在这里插入图片描述

    展开全文
  • 操作条件的响应中使用模型的验证状态 重新呈现带有验证错误的表单 验证创建动作 验证更新操作 要求 确保您运行rake db:seed以便您可以使用一些数据db/seeds.rb定义)。 这是一个准系统应用程序,具有两个...
  • = 这些条件时便不能使用索引查询,只能使用全表扫描。 不耽误大家时间,告诉大家结论: MySQL决定使不使用某个索引执行查询的依据就是成本够不够小,如果null值很多,还是会用到索引的。 自己做了个验证: 一个...
  • = 这些条件时便不能使用索引查询,只能使用全表扫描。不耽误大家时间,告诉大家结论:MySQL决定使不使用某个索引执行查询的依据就是成本够不够小,如果null值很多,还是会用到索引的。自己做了个验证:一个大概3万...
  • 出现这种情况的主要原因是,稳定条件下采样数据符合正态分布,而非稳定条件下采样数据不满足正态分布,而T-2控制极限仅有效检测出该数据的故障。符合正态分布。因此,本文首先分析了周期非稳态条件的特征,...
  • 《大数据:互联网大规模数据挖掘与分布式处理》源自作者斯坦福大学教授多年的“Web挖掘”课程材料,主要关注大数据环境下数据挖掘的实际算法。...(3)对每个频繁项对,存储计数值的数据结构相应的计数值上...
  • 《大数据:互联网大规模数据挖掘与分布式处理》源自作者斯坦福大学教授多年的“Web挖掘”课程材料,主要关注大数据环境下数据挖掘的实际算法。...(3)对每个频繁项对,存储计数值的数据结构相应的计数值上...
  • body 二 2.1 表单项不能为空 <!-- function CheckForm() { if (document.form.name.value.length == 0) { alert("请输入您姓名!"); document.form.name.focus(); return false; } return true; } --> ...
  • 属性验证 props 组件通信时,作为接收值得容器(数组,当这个值要进行属性验证时要写成对象...问题:不能数据的取值范围进行判断 解决: validator props:{ key:{ validator(value){ return value的条件 ...
  • 得到试样不同围压下全应力-应变曲线,给出了围压与峰值强度的线性关系,对粉砂岩试样进行多级增量循环加卸载流变试验,对试验数据进行辨识和分析,结果表明:瞬时塑性应变模型参数辨识过程中不能忽略。使用改进的...
  • 表单验证大全

    2012-12-03 23:27:42
    body 二 2.1 表单项不能为空 [removed] <!-- function CheckForm() { if (document.form.name.value.length == 0) { alert("请输入您姓名!"); document.form.name.focus(); return false; } ...
  • PT095164(去验证).rar

    2019-08-30 17:10:01
    症状:销售出库单据头增加一个单价字段,设置为必录,然后在系统录入一张销售出库单,在数据交换平台导出该单据,在系统删除该单据,然后进行导入,系统提示【多步操作产生错误。请检查每一步的状态值】。 ...
  • MySQL,如果需要查找某一行的值,可以先通过索引找到对应的值,然后根据索引匹配的记录找到需要查询的数据行。然而,有些时候,即使查询条件有索引,也会查询很慢,那是因为查询条件的错误使用导致没有正确利用...
  • 既然已近我们的系统得到了验证,我们现在把我们修改过的albianj2开源出 来,以方便大家使用。 附albianj2的功能列表 1. 一个简单的Service服务,比spring轻量很多很多 2. 一个简单的ORM框架 3. 数据路由...
  • 在上一篇博文,我们整理了300-W、LFPW、HELEN、AFW、IBUG和300-VW这6个数据集,使用Python将特征点绘制对应的图片上,人工验证数据集的正确性,最终获得了223034个人脸特征点数据样本。但是这些样本不能直接...
  • 对于这样的问题,可以利用计算机运算速度快的特点,先搜索查找所有可能出现的情况,再根据题目条件从所有可能的情况,删除那些符合条件的解。 设计一个兰州道路交通咨询系统,让人们咨询从任一个地方顶点到另...
  • Toad 使用快速入门

    2008-11-27 15:22:14
    从网络服务器读取Toad程序,本地计算机安装一些自定义的文件,并且创建到服务器文件的快捷方式,一般推荐使用这个方式,而且要求网络服务器已经配置。 c) TOAD to Network Server 把Toad安装到网络服务器上,...
  • MYSQL中文手册

    2013-03-11 21:21:34
    5.12.3. 多服务器环境中使用客户端程序 5.13. MySQL查询高速缓冲 5.13.1. 查询高速缓冲如何工作 5.13.2. 查询高速缓冲SELECT选项 5.13.3. 查询高速缓冲配置 5.13.4. 查询高速缓冲状态和维护 6. MySQL的...
  • 列表文件 Win32 控制台 RAR 使用 OEM (DOS) 编码。 你可以同一命令行指定普通文件名和列表文件。如果文件和列表 文件都未被指定,那么 RAR 将默认是 *.*,来处理所有文件 一个 UNIX 环境变量,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 466
精华内容 186
关键字:

在数据验证条件中不能使用