自动验证无效的原因及解决方法归纳,7控件详解

图片 1

  最近在使用validate插件进行验证的时候,出现有的控件在个别事件(比如keydown、foucs、onchange等)下不能自动验证,而有的控件却又正常,当时觉得很诡异,后来仔细测试查看,归纳原因及解决方法如下:(不一定全面,但是如果出现了类似的情况,可以做个参考)

在这里,把一些最基本的控件列出来,其实也就是没有归类的控件都放在这里了。

asp.netsqldatasource绑定数据时,出现重复控件名称,不知道是哪操作的问题,之前都正常,但现在选重复的控件,选哪个也可以用,但总感觉不太正常,请各位大神指点一下,不胜感激!

  原因1:控件出现了重复的type值,比如input控件中,出现了多个type=”textbox”,这几个input控件都无法正常的响应事件的自动验证,只有提交后才进行一次验证。

一.TextBlock:这个控件其实就是Label控件。

  解决方法:去掉这个type属性,同样的type值,只能存在最多一个。

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

 

Style:设置字体、字色、大小等样式,用StaticResource方式可以绑定预设的样式。

  原因2:控件出现重复的name值,比如input控件中,出现了多个name=”name”,这几个input控件都无法正常的响应事件的自动验证,而且提交后也不能进行正常的验证。

TextWrapping:设置是否自动换行。

  解决方法:保证控件中没有重复的name属性值。

Text:在控件上要显示的文字。

 

二.CheckBox
多选控件,通过blend工具也可以生成多种效果,另外要想将选择框加大,并不是能过设置Width,Height来完成的,而是通过RenderTransform的Scale来完成的。

  其他个例:一切都配置正常,但是仍然无法实现个别事件的自动验证。

            <CheckBox Content="CheckBox1" Height="219" HorizontalAlignment="Left" Margin="76,22,0,0" Name="checkBox1" VerticalAlignment="Top" Width="293" BorderBrush="Red" Foreground="Blue" Checked="checkBox1_Checked" Background="Gold"  />
            <CheckBox Content="CheckBox2" Height="72" HorizontalAlignment="Left" Margin="143,0,0,319" Name="checkBox2" VerticalAlignment="Bottom"  Checked="checkBox2_Checked" RenderTransformOrigin="0.5,0.5" BorderBrush="#BFFB2200" Foreground="#FF1008F7">
                <CheckBox.Background>
                    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0.504"/>
                        <GradientStop Color="#FFF00000" Offset="1"/>                        
                    </LinearGradientBrush>
                </CheckBox.Background>
                <CheckBox.RenderTransform>
                    <CompositeTransform ScaleX="2" ScaleY="2"/>
                </CheckBox.RenderTransform>
            </CheckBox>

  解决方法:在脚本中,按照validate事件的格式手动显示的重写一下指定的事件,比如

更改Height不能改变CheckBox1的大小。

$(function(){
    $("#form").validate({
                keydown:true,
                errorPlacement: function (error, element) {
                    $("<br/>").appendTo(element.parent());
                    error.appendTo(element.parent());
                }//错误信息显示在控件下方
    })

})

图片 2

  希望上面的东东,能对各位有点小帮助。3Q!

三.RadioButton:单选按钮。当有多个在一起时,可以自动互斥。与多选控件一样,要想使控件变大,需要使用Transform
scale来实现。

  

<RadioButton GroupName="Group1" Content="Group1-Item1" Checked="HandleCheck" Height="72" HorizontalAlignment="Left" Margin="115,50,0,0" Name="radioButton1" VerticalAlignment="Top" />
<RadioButton GroupName="Group1" Content="Group1-Item2" Checked="HandleCheck" Height="72" HorizontalAlignment="Left" Margin="115,128,0,0" Name="radioButton2" VerticalAlignment="Top" />
<RadioButton GroupName="Group2" Content="Group2-Item1" Height="72" HorizontalAlignment="Left" Margin="115,206,0,0" Name="radioButton3" VerticalAlignment="Top" />
<RadioButton GroupName="Group2" Content="Group2-Item2" Height="72" HorizontalAlignment="Left" Margin="115,284,0,0" Name="radioButton4" VerticalAlignment="Top" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="115,397,0,0" Name="choiceTextBlock" Text="TextBlock" VerticalAlignment="Top" />

GroupName:设置RadioButton的分组,组中互斥。

Checked:建议一组使用一个Checked事件处理程序。

private void HandleCheck(object sender, RoutedEventArgs e)
{
   RadioButton rb = sender as RadioButton;
   choiceTextBlock.Text = "You chose: " + rb.GroupName + ": " + rb.Name;
}

图片 3

四.ProgressBar
进度条控件。有两种形式,一种是显示确切进度的;另一种是不确定的,不断重复。

<ProgressBar Height="30" HorizontalAlignment="Left" Margin="12,47,0,0" Name="progressBar1" VerticalAlignment="Top" Width="460"  Value="80"/>
<ProgressBar Height="37" HorizontalAlignment="Left" Margin="8,144,0,0" Name="progressBar2" VerticalAlignment="Top" Width="460" IsIndeterminate="True"   />

Value:进度条的值。

IsIndeterminate:设置进度条形式,False:不重复的进度,按value值变化进度;True:重复进度条。

图片 4

五.Slider:滑杆控件。可以设置水平、垂直方向。

<Slider Height="84" HorizontalAlignment="Left" Margin="12,50,0,0" Name="slider1" VerticalAlignment="Top" Width="460" Minimum="0" Maximum="100" IsDirectionReversed="True" />
<Slider Height="345" HorizontalAlignment="Left" Margin="177,140,0,0" Name="slider2" VerticalAlignment="Top" Width="110" Orientation="Vertical" Minimum="0" Maximum="100" IsDirectionReversed="True"/>

Orientation:设置滑杆方向。

IsDirectionReversed:设置Slider控件值的增加方向。

Value:设置当前值。

图片 5

六.PopUp:弹出控件,可以显示到当前页的最前面。这个控件可以用来做自定义的messagebox,等待框等。前面在容器控件的时候讲过。

七.Thumb:这个控件可以通过拖动,获取连续的坐标(有点儿像笔记本上的触摸板),从而和其他控件组合使用来产生控件拖动效果。

<Canvas Margin="0,0,6,0">
   <Thumb Height="121" HorizontalAlignment="Left" Margin="64,107,0,0" Name="thumb1" VerticalAlignment="Top" Width="137"  DragDelta="thumb1_DragDelta"/>
   <TextBlock  FontSize="20" Canvas.Left="53" Canvas.Top="41" Height="47" Name="textBlock1" Text="TextBlock" Width="340" />
</Canvas>

Thumb的核心事件有:

DragStarted——当你在它上面按下鼠标左键,开始拖动时发生;

DragDelta——只要你的拖动仍在操作(没松开鼠标左键),它就会不断地发生;

DragCompleted——在拖动操作结束后发生。

private void thumb1_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
  Thumb myThumb = (Thumb)sender;
  double nTop = Canvas.GetTop(myThumb) + e.VerticalChange;
  double nLeft = Canvas.GetLeft(myThumb) + e.HorizontalChange;

  Canvas.SetTop(myThumb, nTop);
  Canvas.SetLeft(myThumb, nLeft);

  textBlock1.Text = "Top:" + nTop.ToString() + "nLeft:" + nLeft.ToString();  
}

图片 6

 八.ListBox:相当于一个容器,可以通过ListItem来组合多个控件而得到不同功能的List。

            <ListBox Height="353" HorizontalAlignment="Left" Margin="8,62,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Width="100" Height="100"
Source="{Binding Source}"/>
                            <TextBlock Text="{Binding Text}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox> 

        public class Item
        {
            public ImageSource Source { get; set; }
            public string Text { get; set; }
        }

            List<Item> list = new List<Item>();

            Item item1 = new Item();
            item1.Source = new BitmapImage(new Uri("Images/1.jpg", UriKind.Relative));
            item1.Text = "1.jpg";
            list.Add(item1);
            //
            Item  item2 = new Item();
            item2.Source = new BitmapImage(new Uri("Images/1.jpg", UriKind.Relative));
            item2.Text = "1.jpg";
            list.Add(item2);
            //
            listBox1.ItemsSource = list;

图片 7